坐标和位置系统

UI Toolkit 使用强大的布局系统，根据样式属性中的布局参数自动计算单个元素的位置和大小。这是基于 Flexbox，一种 Web 布局模型。有关更多信息，请参阅布局引擎。

相对和绝对位置

在 UI 工具包中，坐标是指元素在布局中的位置。您可以将布局系统中的每个元素配置为使用相对或绝对坐标：

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

每视觉元素实例化或派生自 C# 的可视化树的节点VisualElement类。您可以设置外观样式、定义行为并将其作为 UI 的一部分显示在屏幕上。更多信息
请参阅术语表确定用于计算其位置的坐标系。您可以配置要在元素样式表中使用的坐标系。

以下 C# 代码片段设置可视元素的坐标空间和位置：

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属性定义如何在局部坐标系和父坐标系之间进行变换。

这VisualElementExtensionsstatic 类提供了以下扩展方法，用于在坐标系之间转换点和矩形：

• WorldToLocal转换一个Vector2或Rect从Panel空格添加到元素内的引用。
• LocalToWorld转换一个Vector2或Rect自Panel空间引用。
• ChangeCoordinatesTo变换Vector2或Rect从一个元素的局部空间到另一个元素的局部空间。

其他资源

• 相对和绝对定位 C# 示例