UI Toolkit では強力なレイアウトシステムを用い、個々の要素のスタイルプロパティのレイアウトのパラメーターに基づいて、個々の要素の位置やサイズを自動的に計算します。これは、ウェブレイアウトモデルである Flexbox に基づいています。詳細は、レイアウトエンジン を参照してください。
UI Toolkit には 2 種類の座標があります。
各ビジュアル要素は、その位置を計算するために使用する座標系を決定します。どの座標系を使用するかは、要素のスタイルシートで設定できます。
以下のコードは、コードを使ってビジュアル要素の座標空間と位置を設定する方法を示しています。
var newElement = new VisualElement();
newElement.style.position = Position.Relative;
newElement.style.left = 15;
newElement.style.top = 35;
要素の原点は左上の角です。
レイアウトシステムは、各要素の VisualElement.layout
プロパティ (タイプ Rect
) を計算します。これには要素の最終的な位置が含まれます。要素の相対位置または絶対位置が考慮されます。
layout.position
は親の座標空間に相対的に、ポイントで表されます。
各 VisualElement
には、要素の位置と回転に追加のローカルオフセットを加えるために使用するトランスフォームプロパティ (ITransform
) があります。このオフセットは、計算されたレイアウトプロパティでは示されません。デフォルトでは、transform
は同一です。
worldBound
プロパティを使用して、レイアウト位置とトランスフォームの両方を考慮に入れて VisualElement
の最終的なウィンドウ空間座標を取得します。この位置には、ウィンドウのヘッダーの高さが含まれます。
VisualElement.layout.position
と VisualElement.layout.transform
プロパティはローカル座標系と親座標系間の変換方法を定義します。
VisualElementExtensions
静的クラスは以下の拡張メソッドを提供し、座標系間の点と矩形を変換します。
WorldToLocal
は、Panel
空間の Vector2
または Rect
を要素内の参照に変換します。LocalToWorld
は Vector2
または Rect
を Panel
空間参照に変換します。ChangeCoordinatesTo
は要素のローカル空間の Vector2
または Rect
を別の要素のローカル空間に変換します。