座標と位置システム

UI Toolkit では強力なレイアウトシステムを用い、個々の要素のスタイルプロパティのレイアウトのパラメーターに基づいて、個々の要素の位置やサイズを自動的に計算します。これは Flexbox というウェブレイアウトモデルに基づいています。詳細は、レイアウトエンジン を参照してください。

相対位置と絶対位置

UI Toolkit には 2 種類の座標があります。

• Relative: 要素の計算された位置に相対的な座標。レイアウトシステムは要素の位置を計算し、オフセットとして座標を追加します。レイアウトエンジンは要素の位置を計算するときに親要素を考慮するため、親要素は子要素のサイズと位置に影響を与える可能性があります。子要素は親要素のサイズにのみ影響します。
• Absolute: 親要素に相対的な座標です。これにより、自動的なレイアウト計算を回避し、要素の位置を直接設定します。同じ親の下にある兄弟要素は、要素の位置に影響を与えません。同様に、要素は同じ親の下にある他の兄弟の位置やサイズに影響を与えません。

各ビジュアル要素は、その位置を計算するために使用する座標系を決定します。どの座標系を使用するかは、要素のスタイルシートで設定できます。

以下のコードは、コードを使ってビジュアル要素の座標空間と位置を設定する方法を示しています。

    var newElement = new VisualElement();
    newElement.style.position = Position.Relative;
    newElement.style.left = 15;
    newElement.style.top = 35;

要素の原点は左上の角です。

レイアウトシステムは、各要素の VisualElement.layout プロパティ (Rect 型) を計算します。これには、要素の最終的な位置が含まれます。要素の相対位置または絶対位置が考慮されます。

layout.position は親の座標空間に相対的な位置で表されます。

各 VisualElement には、要素の位置と回転に追加のローカルオフセットを設定するために使用する transform プロパティ (ITransform) があります。このオフセットは、計算されたレイアウトプロパティでは示されません。デフォルトでは transform は同一です。

worldBound プロパティを使用し、レイアウト位置と変換の両方を考慮して VisualElement の最終的なウィンドウ空間座標を取得します。この位置には、ウィンドウのヘッダーの高さが含まれます。

座標系間の変換

VisualElement.layout.position と VisualElement.transform プロパティはローカル座標系と親座標系間の変換方法を定義します。

VisualElementExtensions 静的クラスは以下の拡張メソッドを提供し、座標系間の位置と矩形を変換します。

• WorldToLocal は、Panel 空間の Vector2 または Rect を要素内の参照に変換します。
• LocalToWorld は、Vector2 または Rect を Panel 空間の参照に変換します。
• ChangeCoordinatesTo は要素のローカル空間の Vector2 または Rect を別の要素のローカル空間に変換します。

追加リソース

• 相対位置と絶対位置 C# の例