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

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

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

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

 

UGUI研究院之RawImage显示多边形或圆形贴图（二十六） - 雨松MOMO程序研究院 - 1

UGUI研究院之RawImage显示多边形或圆形贴图（二十六） - 雨松MOMO程序研究院 - 2

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

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

然后就是代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
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;
}
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
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游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

您可能还会对这些文章感兴趣！

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

  1. 霍兆坤 说：
    2017 年 12 月 5 日上午 11:42

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

    回复
  2. Pengjugame 说：
    2017 年 10 月 18 日下午 1:57

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

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

    回复
  3. 王勇 说：
    2017 年 10 月 10 日下午 5:27

    RawImageEditor哪来的？

    回复
  4. strong 说：
    2017 年 9 月 25 日上午 9:38

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

    回复
  5. 小白0327 说：
    2017 年 9 月 12 日下午 1:51

    大神RawImageEditor我的unity继承不到5.5.2

    回复
  6. x68251 说：
    2017 年 8 月 15 日下午 5:44

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

    回复

留下一个回复

你的email不会被公开。