obsidian/笔记文件/2.笔记/UGUI整体解决方案-案例篇_第二章.md

这个是，实现遮罩的逻辑

![[Pasted image 20240306161852.png]]

继承自

![[Pasted image 20240306161935.png]]

这是重写ugui重绘

![[Pasted image 20240306162017.png]]

在重绘的最开始，先把原本的渲染清空

![[Pasted image 20240306165459.png]]

这里是获取uv信息：

![[Pasted image 20240306162033.png]]

uv有四个角，在坐标系，所以是Vector4

![[Pasted image 20240306162117.png]]

然后，获取uv高度和宽度 计算uv中心和比例 radian是每一块的弧度

![[Pasted image 20240306165844.png]]

![[Pasted image 20240306170005.png]]

原始坐标，和锚点pivot进行计算处理，防止轴心点问题

![[Pasted image 20240306172546.png]]

![[Pasted image 20240306172700.png]]

这里是最开始的绘制，原始顶点

![[Pasted image 20240306171837.png]]

原始颜色

![[Pasted image 20240306172022.png]]

逐弧度递增，对颜色进行赋值； 跟百分比有关，如果在范围内，就是正常颜色，否则，置灰

![[Pasted image 20240306170231.png]]

表现：

![[Pasted image 20240306170622.png]]

![[Pasted image 20240306170332.png]]

获得三角面函数：

![[Pasted image 20240306170438.png]]

结构上，是相邻的：

![[Pasted image 20240306170457.png]]

逻辑实现，也是如此，中间的是圆心0

![[Pasted image 20240306170529.png]]

还有检测点击的逻辑重写： 通过屏幕空间，转换成本地空间，得到一个localPoint

![[Pasted image 20240306170747.png]]

![[Pasted image 20240306170953.png]]

检测点击的算法，就是点击的点，画一根线，如果跟图片，交点总数，是奇数，就说明在图片内，就是点击有效，如果交点总数，是偶数，就说明在图片外，点击无效

![[Pasted image 20240306173110.png]]

也是用到了前面填充的，有效_vertexList顶点列表； 除以2，看奇偶

![[Pasted image 20240306171054.png]]

具体实现，也是遍历顶点列表，然后，对比本地空间，和顶点距离范围，计算相交点总数

![[Pasted image 20240306171157.png]]

![[Pasted image 20240306170843.png]]

这是一个3D滚轮，最终运行的效果，可以看到，实际上，只是一个2d的界面，是通过算法处理，呈现3D效果

![[Pasted image 20240322170231.png]]

逻辑上，每个图片，都会上一个RotationDiagramItem，进行统一管理； 其中包含，位置ID，拖曳移动，对应的Action回调函数，移动的_offsetX偏移；动画的时间_aniTime，用在Dotween动画插件，还有协程的时间等待； 图片和GUI矩形的获取器；

![[Pasted image 20240322170624.png]]

各个设置接口，设置结构父类，图片值； 设置位置信息，调用了Dotween相关的DOAnchorPos和DOScale接口，分别是修改坐标，还有缩放； 然后调用，协程Wait函数，等待动画事件_aniTime过渡之后，通过SetSiblingIndex，修改层级次序；

![[Pasted image 20240322171028.png]]

继续，是两个拖曳函数，还有注册移动监听函数； 另外，每个图片Item体，都会有一个位置PosId，拖曳旋转之后，这个需要，配合总Item数目，重新换算；

![[Pasted image 20240322171345.png]]

位置信息、缩放、层级次序，构成一个ItemPosData的数据类； 位置坐标PosId是一个图片ItemData的结构体；

![[Pasted image 20240322171538.png]]

游戏内，挂载的脚本是这个

![[Pasted image 20240322171641.png]]

对应的逻辑，其中ItemSize是设置，每个图片Item的大小； ItemSprites就是图片数组，用来存储，需要实例化出来，展示的图片集合； Offset就是两个图片之间的间距偏移； ScaleTimesMin 和 ScaleTimesMax，就是在切换过程中，最小和最大的缩放值；

![[Pasted image 20240322171819.png]]

各个功能函数接口：创建一个命名为Template的子实体，大小尺寸，设定为ItemSize的大小，再添加图片和RotationDiagramItem组件； 调用RotationDiagramItem组件的接口，完成父物体的赋值； 添加拖曳移动的监听，是Change函数； 完成以上操作后，就可以加到_items队列容器； Change函数，是其中一个，根据偏移的正负，三元运算，得到symbol方向，再调用另一个Change函数；

![[Pasted image 20240322172132.png]]

两个函数重载

![[Pasted image 20240322173308.png]]