81 lines
3.8 KiB
Markdown
81 lines
3.8 KiB
Markdown
重载的另一个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]] |