文章

UGUI - 绘制动态曲线

发表于
作者 JunQiang
2 分钟阅读

代码

UICurveData 类，用于存放点数据的基础结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

public class UICurveData
{
    #region [Fields]
    public List<Vector2> Postion = new List<Vector2>();
    public Color Ccolor;
    public float Thickness = 1;
    #endregion

    #region [PublicTools]
    public void Addpos(float varX, float varY)
    {
        Addpos(new Vector2(varX, varY));
    }
    public void Addpos(Vector2 varV2)
    {
        Postion.Add(varV2);
    }
    #endregion

}

UICurve 负责构建顶点数据，mesh。

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

public class UICurve : MaskableGraphic
{
    #region [Fields]
    private Dictionary<int, UICurveData> mCurveData = new Dictionary<int, UICurveData>();
    #endregion

    #region [Inherit]
    protected override void OnPopulateMesh(VertexHelper varVerHeler)
    {
        varVerHeler.Clear();

        foreach (var tempKvp in mCurveData)
        {
            var tempUICurveData = tempKvp.Value;
            if (tempUICurveData.Postion.Count < 2)
            {
                continue;
            }
            for (int i = 1; i < tempUICurveData.Postion.Count; i++)
            {
                UIVertex[] verts = new UIVertex[4];

                float x1 = tempUICurveData.Postion[i - 1].x;
                float y1 = tempUICurveData.Postion[i - 1].y;
                float x2 = tempUICurveData.Postion[i].x;
                float y2 = tempUICurveData.Postion[i].y;

                float xd = (y2 - y1) / Mathf.Sqrt(Mathf.Pow(x2 - x1, 2) * Mathf.Pow(y2 - y1, 2)) * tempKvp.Value.Thickness / 2;
                float yd = (x2 - x1) / Mathf.Sqrt(Mathf.Pow(x2 - x1, 2) * Mathf.Pow(y2 - y1, 2)) * tempKvp.Value.Thickness / 2;

                int idx = 0;
                verts[idx].position = new Vector3(tempUICurveData.Postion[i - 1].x - xd, tempUICurveData.Postion[i - 1].y + yd);
                verts[idx].color = tempUICurveData.Ccolor;
                verts[idx].uv0 = Vector2.zero;

                idx++;
                verts[idx].position = new Vector3(tempUICurveData.Postion[i].x - xd, tempUICurveData.Postion[i].y + yd);
                verts[idx].color = tempUICurveData.Ccolor;
                verts[idx].uv0 = Vector2.zero;

                idx++;
                verts[idx].position = new Vector3(tempUICurveData.Postion[i].x + xd, tempUICurveData.Postion[i].y - yd);
                verts[idx].color = tempUICurveData.Ccolor;
                verts[idx].uv0 = Vector2.zero;

                idx++;
                verts[idx].position = new Vector3(tempUICurveData.Postion[i - 1].x + xd, tempUICurveData.Postion[i - 1].y - yd);
                verts[idx].color = tempUICurveData.Ccolor;
                verts[idx].uv0 = Vector2.zero;

                varVerHeler.AddUIVertexQuad(verts);
            }
        }

    }
    #endregion

    #region [PublicTools]
    public void AddCurveData(int varID, UICurveData varCurveData)
    {
        mCurveData.Add(varID, varCurveData);
        SetAllDirty();
    }
    public void Clear()
    {
        mCurveData.Clear();
        SetAllDirty();
    }
    public void RemovePointIDs(params int[] varRemovepoints)
    {
        List<int> tempL = new List<int>();
        tempL.AddRange(varRemovepoints);
        RemovePointIDs(tempL);
    }
    public void RemovePointIDs(List<int> varRemovePoints)
    {
        foreach (var i in varRemovePoints)
        {
            if (!mCurveData.ContainsKey(i)) continue;
            mCurveData.Remove(i);
        }
        SetAllDirty();
    }
    #endregion
}

测试使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

public class TestCurve : MonoBehaviour
{
    void Start()
    {
        var tempCurve = this.gameObject.AddComponent<UICurve>();
        UICurveData tempcd = new UICurveData();
        tempcd.Ccolor = Color.yellow;
        tempcd.Thickness = 2;
        for (int i = 0; i < 360; i++)
        {
            tempcd.Addpos(i * 2,(float)Mathf.Cos(i));
        }
        tempCurve.AddCurveData(1,tempcd);
    }
}

将该脚本挂在 Canvas 上，运行会看到

Unity, UI
UGUI
本文由作者按照 CC BY 4.0 进行授权