Unity UI Toolkit学习笔记-Visual Tree
2023-09-27 14:27:14 时间
🌲Visual Tree
🥡Visual Tree
Visual element
在UI Toolkit中是最基础的元素,由多个Visual element构建具有父子关系的层级树
🍧Visual elements
VisualElement
类是所有ui元素的基类,该类包含样式、布局数据和事件句柄。ui元素 可以拥有子ui元素。
通过Stylesheet(uss)
可以自定义每个ui元素的的样式,可以使用事件回调对特定的交互进行处理。VisualElement
子类可以定义不同的行为方法,内置的控制器:Button、Toggle、Label
等等都有各自的功能。
🍣 Panel
Visual Tree
的父节点是一个Panel
,一个Viusal Tree必须要放到Panel中才能渲染。所有的Panel属于Editor Window
或者UIDocument
,Panel也负责焦点控制和事件分发。
每个ui元素持有所属Panel的直接引用。
🍵 绘制顺序
绘制顺序遵循深度优先:
VisualElement提供了几个更改绘制顺序的方法:
💡BringToFront()
移动到兄弟节点最后让ui绘制到最前
💡SendToBack()
移动到兄弟节点最前面,这样就会被其它兄弟节点挡住
💡PlaceBehind()
a
.PlaceBehind(b
):把a元素放到b前,这样a就比b先绘制,b就可以挡住a。
💡PlaceInFront()
a
.PlaceInFront(b
):把a元素放到b后,使得a比b后绘制,a就可以挡住b
🍝坐标和位置系统
以左上角为原点
UI Toolkit 有两种坐标:
- 相对坐标:子物体会由父ui进行排列,子物体在排列好的位置的基础上再进行偏移。
- 绝对坐标:以父ui的左上角为原点进行偏移。
可以通过样式表修改每个ui元素的坐标类型:
也可以通过代码设置:
var newElement = new VisualElement();
newElement.style.position = Position.Relative;
newElement.style.left = 15;
newElement.style.top = 35;
VisualElement.layout.position
:以父ui的左上角为原点的坐标即绝对坐标。
VisualElement.transform.position
:还没搞懂是干啥的,设置一个很小的值也会导致位置跑到很远。。。;
相关文章
- How to determine why visual studio might be skipping projects when building a solution
- C# 7 .NET / CLR / Visual Studio version requirements
- C/C++中内嵌汇编(Visual Studio 2019)
- Visual Studio安装卸载模板
- UE4引擎学习笔记:Blueprints Visual Scripting->Basic Scripting
- Visual Studio 2019更新到16.1.4
- 在Visual Code中安装对应的工具
- Microsoft Visual C++ Compiler for Python 2.7真正下载地址
- 《数字图像处理与机器视觉——Visual C++与Matlab实现》——1.4 读取和写入图像文件
- Visual Studio Code插件推荐(React开发)
- <Multi-View Image Classification With Visual, Semantic and View Consistency>笔记
- 基于Visual Studio IDE + STM32CubeMX搭建STM32开发环境(详细介绍搭建过程)
- Visual Studio Code Debug C++ on Mac
- 【Visual Studio】解决方案未保存,请先保存你的解决方案,然后再管理Nuget包
- 《Siamese RPN:High Performance Visual Tracking with Siamese Region Proposal Network》论文笔记