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 を別の要素のローカル空間に変換します。