座標と位置システム

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 には、要素の位置と回転に追加のローカルオフセットを加えるために使用するトランスフォームプロパティ (ITransform) があります。このオフセットは、計算されたレイアウトプロパティでは示されません。デフォルトでは、transform は同一です。

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

座標系間の変換

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

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

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

その他の参考資料

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