obsidian/笔记文件/2.笔记/UGUI整体解决方案-案例篇_第三章.md
2025-03-26 00:02:56 +08:00

3.8 KiB
Raw Blame History

重载的另一个Change函数会遍历所有的_items集合通过symbol方向传参配合当前总数调用ChangeId函数重新对Item实体的PosId进行赋值修改; 还会调用SetPosData函数配合Dotween插件实现动画功能 动画结束后调用Wait协程通过SetSiblingIndex函数完成层级次序的重新调整

!Pasted image 20240323153526.png

!Pasted image 20240324104038.png

!Pasted image 20240324104301.png

!Pasted image 20240324104412.png

初始化函数中创建完实体之后再调用CalulateData函数计算位置坐标数据 其中长度length是实体的x加上Offset偏移而偏移值radioOffset是根据整体的总数对应的倒数 开始遍历所有的RotationDiagramItem的实体总数_Items.Count实例化新的Item数据类ItemData把i这个索引设置为对应的位置信息PosId Item对应的位置类也实例化出来配合当前的radio比例和总长度使用GetX拿到当前的X坐标参数值也是配合 radio比例使用GetScaleTimes函数拿到所在位置对应的缩放值 radio比例 加上 radioOffset 偏移值,再进入下一个循环; 遍历后通过OrderBy以缩放值 ScaleTimes 为排序依据,重新排序列表; 再通过遍历排序后的列表设定坐标数据集合_posData对应的Order次序之前提及过是通过SetSiblingIndex用来设置层级次序的

!Pasted image 20240324105149.png

以上是创建Item相关然后通过 SetItemData函数也是调用RotationDiagramItem的SetPosData函数使用Dotween插件完成动画的初始化位置

!Pasted image 20240326121024.png

!Pasted image 20240326121042.png

运行游戏可以看到最终呈现的是3D图片圈效果但实际上是2D的图片这样性能上会好很多实现需求 鼠标拖曳触发OnDrag和OnEndDrag的函数调用_moveAction完成图片的移动和轮换

!Pasted image 20240326121343.png

这是一个雷达图

!Pasted image 20240326133709.png

对应会有5个拖曳点

!Pasted image 20240326133745.png

它对应的是 RadarChartHandler 脚本逻辑; 继承自 MonoBehaviour和 拖曳IDragHandler 有两个获取器分别是用来获取Image图片和RectTransform坐标的

!Pasted image 20240326133840.png

还有其他几个函数接口,分别是设置父类、图片、颜色、 锚点坐标anchoredPosition、尺寸sizeDelta、缩放localScale

!Pasted image 20240326134018.png

这是雷达图的管理相关逻辑继承自UGUI的Image类分别是操作点相关合集_points还有操作相关的合集_handlers

!Pasted image 20240326141355.png

更新函数中,调用的是,不断重绘; 然后是重写OnPopulateMesh函数参考OnPopulateMesh; 在网格信息Clear清理之后其中还会调用AddVerts和AddTriangle两个函数分别重新添加顶点和三角面

!Pasted image 20240326141518.png

!Pasted image 20240326141555.png

对应的具体逻辑添加顶点是根据拖拽点_handlers的局部坐标和自身颜色设置 AddTriangle函数体根据顶点数量按顺序设置三角面

!Pasted image 20240326154744.png

!Pasted image 20240326154920.png

雷达图管理类对应的编辑器面板绘制类通过FindProperty找到在RadarChart声明的各个变量

!Pasted image 20240326155038.png

OnInspectorGUI重写除了显示出声明序列化的各个变量还会弄两个按钮分别是初始化用来生成Handler操作顶点的Point雷达图顶点和可操作顶点GUI的change字段判定设置是否要设置为脏标记进入UGUI重绘

!Pasted image 20240326155154.png

面板表现

!Pasted image 20240326155444.png