Skip to main content

Adorners

CGI Studio には、レイアウター内のノードを簡単に操作するために、装飾を使用するオプションが用意されています。装飾ギズモは、レイアウトoffers カテゴリの垂直方向の配置、水平方向の配置、サイズ、マージンthe (左、上、右、下)、および変換カテゴリの位置のプロパティに影響を与える可能性があります。この編集は、ノードoption プロパティの値を手動で変更しなくても、マウスとキーボードを使用して実行できるようになりました。to use adorners for an easy manipulation of the nodes inside layouters. The adorners gizmos can affect the following properties: Vertical Alignment, Horizontal Alignment, Size and Margin(Left, Top, Right, Bottom) in the Layout category and the Position in the Transformations category. This editing can now be done using the mouse and keyboard without having to manually change the node properties values.

レイアウト編集モードを有効にするEnable layout edit mode

レイアウト編集モードに入るにはThere 2are つの方法があります。1two つ目は、メニューways バーから専用のアイコンをクリックすることです。to enter in the layout edit mode. The first one is to click on the dedicated icon from the menu bar:

drawing-4-1682585625.png

2The 番目のオプションは、second option is to press the 'L' キーを押すことです。key.

アドナーIn ギズモをアクティブにするには、次の条件の少なくともorder 1for つを満たす必要があります。the adorners gizmo to be active, it is also required to meet at least one of the following conditions:

  • ノードの親は、BaseLine、Grid、Overlay、Stack、またはthe DockPanelparent タイプのof the node is a Layouter です。of type BaseLine, Grid, Overlay, Stack or DockPanel
  • ノードはthe node is a 2D Bitmap Node with a 9-Patch イメージを持つimage 2Don ビットマップ ノードですit
  • ノードはthe node is a Canvas Sprite で、and has a Texture with a 9-Patch 画像が設定されたimage Textureset がありますon it
  • ノードはthe node is a 2D TextNode またはor a 3D Canvas Text です。Text.

そのため、So for 9-Patch 画像とテキストimages ノードの場合、ノードがレイアウターの外にある場合でもギズモは機能します。他のタイプのノードの場合、装飾ギズモを選択する効果は、[選択]and 編集モードでクリックして選択するのと同じです。text nodes, the gizmo works even when the node is outside of a layouter. For other types of nodes, the effect of selecting the adorners gizmo will be the same as selecting clicking on the Select edit mode.

アドナーWhen ギズモがアクティブな場合、要素は、コーナーとエッジの中央にthe adorners gizmo is active, the element is surounded by a dashed rectangle with 8 つのアクティブactive ポイントを持つ破線の長方形で囲まれます。ノードがレイアウター内にある場合、points on its corners and middle of edges. If node is inside a layouter 4 つの小さなsmall チェーンchainボタンもレイアウト領域の端に表示されます。オレンジ色の円はピボット ポイントを示します。黄色の四角形は、レイアウターbuttons タイプとそのプロパティに基づいて計算されるレイアウト領域を表します。also appear on the edges of the layout area. The orange circle indicates the Pivot Point. The yellow rectangle represents the layout area which is computed based on the layouter type and its properties.

drawing-4-1682585646.png

In 3D では、ギズモを使用しても、変換可能なプロパティのthe usage of the gizmo does not change the Z 軸の値は変更されません。axis values on any of the transformable properties.

ノードの移動Moving nodes

ノードにカーソルを合わせると、カーソルが変化します。When hovering over the node, the cursor changes.

drawing-4-1682585658.png

The adorners gizmo allows to drag the object around, just like in translation mode. If inside a layouter, the Margin property of the node is changed together with its Position. It is also possible to move the object using the keyboard by holding the Shift key and then pressing any of the arrow keys.

While moving an object using the adorners gizmo, if the object is dragged over another layouter, the user will not have the option to switch the layout parent of the dragged object.

Aligning and resizing nodes

The active points on the dashed rectangle can be dragged to change the Layout Size and Margin and/or Position of the node. Pressing the Shift key while dragging active points causes the gizmo to function differently. For example if the Shift key is pressed when dragging upward the upper middle active point of a node inside a stack layouter, the effect will be the same as if manually changing the Layout Size property and keeping the same Position. If the Shift key is not pressed and the upper middle active node is dragged upward, then both the Layout Size and Position of the node will be modified.

The effect of the Shift key and the functioning of the adorners in general depends on whether the size properties of the layouter and its children are auto or not and on the layout type. The current document does not aim to explain all the possible combinations of properties.

The chain buttons allow the user to set the desired Layout Vertical Alignment and/or Horizontal Alignment. By default all chains are enabled (closed). Breaking (opening) one chain (the left for example) will close the one opposite to it (the right one in the example), unless the Shift key is pressed. So in order to be able to open both left and right chains, the Shift key needs to be used.

Left chain Right chain Horizontal Alignment
closed closed Stretch
closed open Left
open closed Right
open open (use Shift key) Center

The same logic goes for the top and bottom chains.

drawing-4-1676361448.png
drawing-4-1676361532.png
drawing-4-1676361569.png

When the node is inside a layouter, the chains buttons have values next to them. If the chain is open, then no value is shown.

The values next to the chain nodes indicate the effective distance in pixels between the layouter area edges (arrange area) and the edges of the dashed rectangle of the node.

These values are always positive and are not the same as the values of the Margin properties which can be negative. The chain values stay the same even when the scale of the parent layouter or its ancestors changes.

If the LayoutDirection of the parent layouter is changed, then the behavior of the gizmo is going to be adapted according to the new direction. For instance, if the LayoutDirection of the parent layouter changes from LeftToRightDirection to RightToLeftDirection, the gizmo functionality will be horizontally reversed. So if a node was previously Left aligned, it will become Righ aligned.

drawing-4-1682585777.png

The current culture Text Direction also affects the the LayoutDirection of text nodes. When changing the current culture from a left to right culture to a right to left one, an initially Left aligned node, will become Right aligned.

drawing-4-1676361780.png

While editing the node using the adorners the status bar shows the values of the property being modified (Size when dragging active points, Position when moving the node inside the layout area).

Snapping of 2D Nodes

A prerequisite for this functionality is to enable the Snap to Objects option in この機能の前提条件は、 File -> Preferences -> Editor -> 2D で. SnapWhen in layout edit mode, the effect will be to Objectsalign オプションを有効にすることです。レイアウト編集モードの場合、ドラッグされたオブジェクトは、スナップ感度に基づいて、同じレイアウトthe スペース内の他の兄弟ノードだけでなく、レイアウトdragged エリアにも配置されます。object to the layout area as well as to other sibbling nodes in the same layout space based on the snapping sensitivity.

drawing-4-1676361850.png

上の画像では、水平の青い線は、右側のテキストIn ノードがレイアウト領域の下端にスナップしていることを表しています。垂直の青い線は、左側のテキストthe ノードに対する右側のテキストabove ノードのスナップを表します。image the horizontal blue line represents the snapping of the text node in the right to the lower edge of the layout area. The vertical blue line represents the snapping of the text node in the right relatively to the left text node.

drawing-4-1676361874.png

ノードに回転がある場合、同じ回転を持つ他のノードに対してのみスナップします。If the node has rotation, it will snap only relatively to other nodes having the same rotation.

drawing-4-1676361922.png

Back to top