SpriteRenderer的Shader实现Image的Filled(二)

今天说说Radial90、Radial180和Radial360这三个模式的实现

实现原理

判断当前点是否显示是判断当前点和选择的旋转中心点的向量和初始轴的夹角是否在显示角度内

如图1:点A和旋转中心点的向量和初始轴的夹角∠A在显示度数a范围内,所以点A显示

             点B和旋转中心点的向量和初始轴的夹角∠B不在显示度数a范围内,所以点B不显示


SpriteRenderer的Shader实现Image的Filled(二)_第1张图片
(图1)

那么∠A和∠B怎么计算呢?

图2中,选择的旋转中心点(0,0),旋转轴为X轴,则点(x,y)和x轴的夹角a的计算

角度a=Mathf.Atan2(y,x)*Mathf.Rad2Deg

通过反正切获得弧度,再转换为度数


SpriteRenderer的Shader实现Image的Filled(二)_第2张图片
(图2)


图3是(1,1)、(-1,1)、(-1,-1)、(1,-1)四个点与x轴根据公式计算出来的角度值

SpriteRenderer的Shader实现Image的Filled(二)_第3张图片
(图3)

我们需要将计算的角度转换为0°-360°的值,如图5

if(a<0){a+=360;}

SpriteRenderer的Shader实现Image的Filled(二)_第4张图片
(图4)


Radial90分别以(0,0)-(1,0)、(0,1)-(0,0)、(1,1)-(0,1)、(1,1)-(1,0)四个为初始轴

以(0,0)、(0,1)、(1,1)、(1,0)四个旋转中心点进行角度判断

SpriteRenderer的Shader实现Image的Filled(二)_第5张图片
(图5)


Radial180分别以(0.5,0)-(1,0)、(0,0.5)-(0,0)、(0.5,1)-(0,1)、(1,0.5)-(1,0)四个为初始轴

以(0.5,0)、(0,0.5)、(0.5,1)、(1,0.5)四个旋转中心点进行角度判断

SpriteRenderer的Shader实现Image的Filled(二)_第6张图片
(图6)

Radial360分别以(0.5,0.5)-(0,-1)、(0.5,0.5)-(1,0)、(0.5,0.5)-(0,1)、(0.5,0.5)-(-1,0)四个为初始轴

以(0.5,0.5)一个旋转中心点进行角度判断


Shader中的具体实现就是以此原理实现的。



最后附上完整Shader文件

你可能感兴趣的:(SpriteRenderer的Shader实现Image的Filled(二))