[Unity] UGUI远离Mask，实现圆形的Image
参考： 丢掉Mask遮罩，更好的圆形Image组件
先展示一下最终效果
关于UGUI Mask存在的问题请移步参考文章，里面介绍的很详细。再造这个轮子的目的，一方面是为了更好的理解实现原理，一方面是对参考代码进行效果、性能方面的改进。下面是一组对比：
正常Sprite
效果对比(上图是我的，下图为参考方案)
从图中可以看到参考方案有几个问题：
- 圆形显示区域超出了Image组件的Rect范围（我选择了长宽中较短的一个作为直径限制了显示范围）
- 参考方案的UV有点问题，把同一个图集中不属于这个Sprite的部分也显示出来了
- 改变Pivot，x会改变圆形的大小，y会移动圆形的位置（这个在图中看不出来）
性能对比(我的：Editor下100个Image)
性能对比(参考实现：Editor下100个Image)
代码
public class UICircleImage : Image
{
protected override void Awake()
{
base.Awake();
OnRectTransformDimensionsChange();
}
private Rect _rect;
protected override void OnRectTransformDimensionsChange()
{
_rect = rectTransform.rect;
Thickness = Mathf.Clamp(Thickness, 0, _rect.width / 2);
base.OnRectTransformDimensionsChange();
}
[Tooltip("圆形或扇形填充比例")] [Range(0, 1)] public float FillPercent = 1f;
[Tooltip("是否填充圆形")] public bool Fill = true;
[Tooltip("圆环宽度")] public float Thickness = 5;
[Tooltip("圆形")] [Range(3, 100)] public int Segements = 20;
private static readonly float CenterPivot = 0.5f;
protected override void OnPopulateMesh(VertexHelper vh)
{
vh.Clear();
_CacheData();
float degreeDelta = 2 * Mathf.PI / Segements;
/* 这里向上取整，才能在切换扇形的时候正常过度
* 否则当FillPercent != 1时，马上会少两个步长
*/
int curSegements = Mathf.CeilToInt(Segements * FillPercent);
// 取宽高最短的一方为直径
float outerRadius = 0.5f * Mathf.Min(_rect.width, _rect.height);
// 实际圆形区域的圆心坐标
float centerX = (rectTransform.pivot.x - CenterPivot) * _rect.width;
float centerY = (rectTransform.pivot.y - CenterPivot) * _rect.height;
float curDegree = 0;
if (Fill) //圆形
{
int verticeCount = curSegements + 1;
// 圆心
_AddVert(vh, centerX, centerY);
for (int i = 1; i < verticeCount; i++)
{
float cosA = Mathf.Cos(curDegree);
float sinA = Mathf.Sin(curDegree);
curDegree += degreeDelta;
_AddVert(vh, centerX + cosA * outerRadius, centerY + sinA * outerRadius);
}
int triangleCount = curSegements * 3;
for (int i = 0, vIdx = 1; i < triangleCount - 3; i += 3, vIdx++)
{
vh.AddTriangle(vIdx, 0, vIdx + 1);
}
if (FillPercent == 1) //首尾顶点相连
{
vh.AddTriangle(verticeCount - 1, 0, 1);
}
}
else //圆环
{
float innerRadius = outerRadius - Thickness;
int verticeCount = curSegements * 2;
for (int i = 0; i < verticeCount; i += 2)
{
float cosA = Mathf.Cos(curDegree);
float sinA = Mathf.Sin(curDegree);
curDegree += degreeDelta;
_AddVert(vh, centerX + cosA * innerRadius, centerY + sinA * innerRadius);
_AddVert(vh, centerX + cosA * outerRadius, centerY + sinA * outerRadius);
}
int triangleCount = curSegements * 3 * 2;
for (int i = 0, vIdx = 0; i < triangleCount - 6; i += 6, vIdx += 2)
{
vh.AddTriangle(vIdx + 1, vIdx, vIdx + 3);
vh.AddTriangle(vIdx, vIdx + 2, vIdx + 3);
}
if (FillPercent == 1) //首尾顶点相连
{
vh.AddTriangle(verticeCount - 1, verticeCount - 2, 1);
vh.AddTriangle(verticeCount - 2, 0, 1);
}
}
}
/// <summary>
/// 缓存一些Mesh计算的数据，这些数据每次取都会有一定的耗时
/// </summary>
private void _CacheData()
{
_tmpVert.color = color;
Vector4 uv = overrideSprite != null ? DataUtility.GetOuterUV(overrideSprite) : Vector4.zero;
_uvMinX = uv.x;
_uvMinY = uv.y;
_uvScaleX = (uv.z - uv.x) / _rect.width;
_uvScaleY = (uv.w - uv.y) / _rect.height;
_rectXMin = _rect.xMin;
_rectXMax = _rect.xMax;
_rectYMin = _rect.yMin;
_rectYMax = _rect.yMax;
}
// UV分布到Rect上的单位距离
private float _uvScaleX;
private float _uvScaleY;
// UV范围
private float _uvMinX;
private float _uvMinY;
// RectTransform范围
private float _rectXMin;
private float _rectXMax;
private float _rectYMin;
private float _rectYMax;
private UIVertex _tmpVert = UIVertex.simpleVert;
private Vector2 _tmpV2 = Vector2.zero;
private Vector3 _tmpV3 = Vector3.zero;
private void _AddVert(VertexHelper vh, float vertX, float vertY)
{
// 做Clamp是为了防止圆形Mesh超出RectTransform的范围
float posX = Mathf.Clamp(vertX, _rectXMin, _rectXMax);
float posY = Mathf.Clamp(vertY, _rectYMin, _rectYMax);
_tmpV3.x = posX;
_tmpV3.y = posY;
_tmpVert.position = _tmpV3;
/* 这样实现的效果是：将完整Sprite用Rect盖住，在中间挖出一个圆形的可见区域
* 这个实现更接近Mask的效果
*/
_tmpV2.x = _uvMinX + _uvScaleX * (posX - _rectXMin);
_tmpV2.y = _uvMinY + _uvScaleY * (posY - _rectYMin);
_tmpVert.uv0 = _tmpV2;
vh.AddVert(_tmpVert);
}
}
整个功能还有一部分Editor的代码，实现在Inspecter上显示4个public参数，因为与算法无关又比较简单，就不贴出来了。
一点记录
上面代码中有不少的篇幅用来缓存一些float变量，虽然罗嗦又不美观，但对性能友好。
附一张早期性能的数据来证明这一堆变量的存在有意义
性能测试数据，都是用100个Image同时激活的点来看的。这个早期有问题的性能数据，说明了一个问题：当调用次数到达2000这个数量级时，一些Unity内置结构中看似简单的操作，也会产生可观的耗时。
针对这张图里的问题，我做了下面的处理：
-
String.memset()：这个耗时很奇怪，看名字像是String操作的，但这个函数中没有任何String处理。经过试验，发现把函数中
new UIVertex {...}去掉后，这个耗时就没了。
整改：类中定义变量_tmpVert复用，不是每个顶点都new一个新的。 -
Color32.op_Implicit()：这是Color=》Color32隐式类型转换的耗时。
产生这个转换是因为UIVertex顶点色是Color32，而Image使用的是Color，所以每次vert.color=img.color;都会有这个转换的耗时。
整改：每次OnPopulateMesh的时候取一次值，直接存到_tmpVert中，减少转换次数。 -
Vector2.op_Implicit()：Vector2=》Vector3隐式类型转换的耗时。
转换原因：UIVertex.position是Vector3，计算UI坐标的时候我用的Vector2，赋值的时候没注意类型，代码正常运行很容易就忽略这个耗时。
整改：类中定义_tmpV3，添加顶点的时候只修改x、y分量。有了这个复用变量，也会避免产生Vector3..cotr()的消耗 -
Vector2.op_XXX()：剩下几个Vector2的耗时是计算加、减、乘产生的。
整改：直接放弃Vector2，用float分量自己算 -
Rect.get_XXX()：这些都是从Rect结构中取值的耗时，像xMin、yMin这种没有任何计算只是返回一个值，明显很浪费。
整改：同样是放弃Rect，用float分量自己算或本地存
最后额外说一点，本来我是想用MeshEffect方式做成一个额外的组件（类似Unity的Outline），但看Profiler的时候发现原来Image生成Mesh的耗时还在（好像有3ms），而我完全不用它Mesh，这个性能就完全浪费了。所有最终改成用Image的子类实现。
