首页 >Unity3D频道 >【UGUI研究院】 > UGUI研究院之RawImage显示多边形或圆形贴图(二十六)
2017
04-28

UGUI研究院之RawImage显示多边形或圆形贴图(二十六)

项目中可能有些icon.有的地方显示矩形,有的地方又要显示圆形。

网上我看有人用shader实现了,我觉得使用起来不太方便。后来参考了一个工程 https://bitbucket.org/ddreaper/unity-ui-extensions

 

Snip20170428_4

Snip20170428_5

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

Snip20170428_7

然后就是代码

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;
	}
		
}
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;
using UnityEditor.UI;

[CustomEditor(typeof(UICircle), true)]
[CanEditMultipleObjects]
public class UICircleInspector : RawImageEditor {

	public override void OnInspectorGUI()
	{
		base.OnInspectorGUI ();
		UICircle circle = target as UICircle;
		circle.segments = Mathf.Clamp(EditorGUILayout.IntField ("UICircle多边形", circle.segments),4,360);

	}

}

OK,因为继承的是RawImage所以缺点就是没办法合并批次了。(因为我们项目icon比较多,不想把图集撑得很大,而带来内存的问题,所以暂时没考虑合并批次的问题)

最后编辑:
作者:雨松MOMO
专注移动互联网,Unity3D游戏开发
捐 赠写博客不易,如果您想请我喝一杯星巴克的话?就进来看吧!

UGUI研究院之RawImage显示多边形或圆形贴图(二十六)》有 6 条评论

  1. 霍兆坤说:

    您好 rawImageEditor 继承不到 在UnityEditor后点不到UI这个 我版本时5.6.0
    谢谢大神

  2. 5.6里我把
    protected override void OnPopulateMesh(VertexHelper vh)
    改成
    public override void ModifyMesh(VertexHelper vh)
    对吗?

    在不运行的时候是正确的,但是一运行,图形就不对了。

  3. 王勇说:

    RawImageEditor哪来的?

  4. strong说:

    这个组件在线框模式下为什么看不到线框?

  5. 小白0327说:

    大神RawImageEditor我的unity继承不到5.5.2

  6. x68251说:

    大侠,Unity3D 切面视图怎么做啊?比如建立一个透明面片,移动面片可以看到模型与面片切面的视图效果。没有思路啊!

留下一个回复

你的email不会被公开。 必填项已用 * 标注。