UI 工具包使用强大的布局系统,该系统根据元素样式属性中的布局参数自动计算各个元素的位置和大小。这基于 Flexbox,一个 Web 布局模型。有关更多信息,请参阅 布局引擎。
UI 工具包有两种类型的坐标
每个 可视化元素可视化树的节点,它实例化或派生自 C# VisualElement
类。您可以设置外观、定义行为,并将其作为 UI 的一部分显示在屏幕上。 更多信息
参见 词汇表 确定用于计算其位置的坐标系。您可以在元素样式表中配置要使用的坐标系。
以下代码展示了如何通过代码设置可视化元素的坐标空间和位置
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.transform
属性定义了如何在本地坐标系和父坐标系之间进行转换。
VisualElementExtensions
静态类提供了以下扩展方法,这些方法可以在坐标系之间转换点和矩形
WorldToLocal
将 Vector2
或 Rect
从 Panel
空间转换为元素内的参考系。LocalToWorld
将 Vector2
或 Rect
转换为 Panel
空间参考系。ChangeCoordinatesTo
将 Vector2
或 Rect
从一个元素的本地空间转换为另一个元素的本地空间。