RawImage显示多边形或圆形贴图

最新推荐文章于 2024-04-22 14:18:58 发布

转载最新推荐文章于 2024-04-22 14:18:58 发布 · 636 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：http://www.xuanyusong.com/archives/4375

文章标签：

#ugui #unity #c#

本文介绍了一种在Unity中使用RawImage组件显示圆形图标的方法，通过自定义UICircle类，可以灵活调整圆形的段数，实现从多边形到圆形的平滑过渡。这种方法避免了使用shader带来的不便，适用于需要在不同形状间切换图标的应用场景。

RawImage显示多边形或圆形贴图

RawImage显示多边形或圆形贴图
正文

RawImage显示多边形或圆形贴图

项目功能需要，便在网上找到了雨松大神的一篇文章。亲测有效，做个记录。

原文章连接：
UGUI研究院之RawImage显示多边形或圆形贴图（二十六）

正文

项目中可能有些icon.有的地方显示矩形，有的地方又要显示圆形。
网上我看有人用shader实现了，我觉得使用起来不太方便。后来参考了一个工程 https://bitbucket.org/ddreaper/unity-ui-extensions

把sprite或者texture拽上去。在这里设置多边形的数量，我测试36就已经很圆了。。

UGUI研究院之RawImage显示多边形或圆形贴图（二十六） - 雨松MOMO程序研究院 - 3
然后就是代码

using System;
using UnityEngine;
using UnityEngine.UI;
 
public class UICircle : RawImage
{
	const int FILL_PERCENT = 100;
	float thickness = 5;
 
	[SerializeField][Range(4,360)]
	int _segments = 36;
 
	public int segments 
	{
		get { return _segments;}
		set
			{ 
				if (_segments != value)
				 {
					_segments = value; 
					SetVerticesDirty ();
					#if UNITY_EDITOR
					UnityEditor.EditorUtility.SetDirty (transform);
					#endif
				}
			}
	}
 
	protected override void OnRectTransformDimensionsChange ()
	{
		base.OnRectTransformDimensionsChange ();
		this.thickness = (float)Mathf.Clamp (this.thickness, 0, rectTransform.rect.width / 2);
	}
    
	protected override void OnPopulateMesh(VertexHelper vh)
    {
        float outer = -rectTransform.pivot.x * rectTransform.rect.width;
        float inner = -rectTransform.pivot.x * rectTransform.rect.width + this.thickness;
 
        vh.Clear();
 
        Vector2 prevX = Vector2.zero;
        Vector2 prevY = Vector2.zero;
        Vector2 uv0 = new Vector2(0, 0);
        Vector2 uv1 = new Vector2(0, 1);
        Vector2 uv2 = new Vector2(1, 1);
        Vector2 uv3 = new Vector2(1, 0);
        Vector2 pos0;
        Vector2 pos1;
        Vector2 pos2;
        Vector2 pos3;
 
        float tw = rectTransform.rect.width;
        float th = rectTransform.rect.height;
 
        float angleByStep = (FILL_PERCENT / 100f * (Mathf.PI * 2f)) / segments;
        float currentAngle = 0f;
        for (int i = 0; i < segments + 1; i++)
        {
            float c = Mathf.Cos(currentAngle);
            float s = Mathf.Sin(currentAngle);
            StepThroughPointsAndFill(outer, inner, ref prevX, ref prevY, out pos0, out pos1, out pos2, out pos3, c, s);
            uv0 = new Vector2(pos0.x / tw + 0.5f, pos0.y / th + 0.5f);
            uv1 = new Vector2(pos1.x / tw + 0.5f, pos1.y / th + 0.5f);
            uv2 = new Vector2(pos2.x / tw + 0.5f, pos2.y / th + 0.5f);
            uv3 = new Vector2(pos3.x / tw + 0.5f, pos3.y / th + 0.5f);
            vh.AddUIVertexQuad(SetVbo(new[] { pos0, pos1, pos2, pos3 }, new[] { uv0, uv1, uv2, uv3 }));
            currentAngle += angleByStep;
        }
    }
 
    private void StepThroughPointsAndFill(float outer, float inner, ref Vector2 prevX, ref Vector2 prevY, out Vector2 pos0, out Vector2 pos1, out Vector2 pos2, out Vector2 pos3, float c, float s)
    {
        pos0 = prevX;
        pos1 = new Vector2(outer * c, outer * s);
 
        pos2 = Vector2.zero;
        pos3 = Vector2.zero;
 
        prevX = pos1;
        prevY = pos2;
    }
	protected UIVertex[] SetVbo(Vector2[] vertices, Vector2[] uvs)
	{
		UIVertex[] vbo = new UIVertex[4];
		for (int i = 0; i < vertices.Length; i++)
		{
			var vert = UIVertex.simpleVert;
			vert.color = color;
			vert.position = vertices[i];
			vert.uv0 = uvs[i];
			vbo[i] = vert;
		}
		return vbo;
	}
}

OK，因为继承的是RawImage所以缺点就是没办法合并批次了。（因为我们项目icon比较多，不想把图集撑得很大，而带来内存的问题，所以暂时没考虑合并批次的问题）
本文固定链接: https://www.xuanyusong.com/archives/4375
根据要求转载注明: 雨松MOMO 2017年04月28日于雨松MOMO程序研究院发表