坐标和位置系统

UI 工具包使用强大的布局系统，根据其样式属性中的布局参数自动计算各元素的位置和大小。这是基于 Web 布局模型 Flexbox。更多信息，请参阅布局引擎。

相对和绝对位置

UI 工具包有两种坐标：

• Relative：相对，即相对于元素已计算位置的坐标。布局系统会计算元素的位置，然后添加坐标作为偏移量。父元素可以影响子元素的大小和位置，因为布局引擎在计算元素位置时会考虑它们。子元素只能影响父元素的大小。
• Absolute：绝对，即相对于父元素的坐标。这样就绕过了自动布局计算，直接设置元素的位置。同一父元素下的子级元素对元素的位置没有影响。同样，该元素不影响同一父级下其他同级元素的位置和大小。

每个视觉元素确定用来计算其位置的坐标系。您可以在元素样式表中配置要使用的坐标系。

下面的代码演示如何通过代码设置一个视觉元素的坐标空间和位置：

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

元素的原点是其左上角。

布局系统会为每个元素计算 VisualElement.layout 属性（Rect 类型），其中包括元素的最终位置。这会将元素的相对或绝对位置纳入考量。

layout.position 以点 (point) 表示，相对于其父级的坐标空间。

每个 VisualElement 都有一个变换属性 (ITransform)，您可以使用它为元素的位置和旋转添加额外的局部偏移。偏移量并不在已计算的布局属性中表示。默认情况下，transform 是标识。

使用 worldBound 属性检索 VisualElement 的最终窗口空间坐标，同时考虑布局位置和变换。此位置包括窗口标题的高度。

坐标系之间的变换

VisualElement.layout.position 和 VisualElement.transform 属性用于定义如何在局部坐标系和父坐标系之间进行转换。

VisualElementExtensions 静态类提供了以下扩展方法在坐标系之间转换点和矩形：

• WorldToLocal 将 Vector2 或 Rect 从 Panel 空间转换为元素内的参照系。
• LocalToWorld 将 Vector2 或 Rect 转换为 Panel 空间参照系。
• ChangeCoordinatesTo 将 Vector2 或 Rect 从一个元素的局部空间转换为另一个元素的局部空间。

其他资源

• 相对和绝对位置的 C# 示例