Unity-UGUI-曲线绘制

BaseMeshEffect

• 在UGUI中，这个修改的顶点单位是实际的像素(比如画布引用分辨率为800x600)
• 坐标系以Pivot 为原点(0,0)的坐标系,比如你的三角型顶点都在一象限，那么0.5的Pivot 效果就和其他的Image 0.0 的效果一样。

简易线条实现

using System.Collections;
using System.Collections.Generic;

using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(Image))]
//[ExecuteInEditMode]
public class Line : BaseMeshEffect
{
    public Vector3[] quad = new Vector3[4];

    public Vector2 StartPos = Vector2.zero;
    public Vector2 EndPos = Vector2.one;
    public float LineWidth = 1;
    public override void ModifyMesh(VertexHelper vh)
    {
        vh.Clear();
        DrawLine(vh,StartPos,EndPos,LineWidth);
    }



    // Update is called once per frame
    void Update()
    {
        var image = MyImage;
        if (image != null) {
            image.SetVerticesDirty();
        }
    }

    private Image curImage;
    protected Image MyImage
    {
        get {
            if (curImage == null) {
                curImage = GetComponent<Image>();
            }
            return curImage;
        }
    }

    private void DrawLine(VertexHelper vh, Vector2 startPos,Vector2 endPos,float width) {

        var lineOri = endPos - startPos;
        var verticalOri = GetVerticalFrom(lineOri).normalized;
        var pos1 = endPos + (verticalOri * width);
        var pos2 = endPos - (verticalOri * width);
        var pos3 = startPos + (verticalOri * width);
        var pos4 = startPos - (verticalOri * width);

        vh.AddVert(pos1,Color.white,Vector4.zero);
        vh.AddVert(pos2, Color.white,Vector4.zero);
        vh.AddVert(pos3, Color.white,Vector4.zero);
        vh.AddVert(pos4, Color.white,Vector4.zero);

        vh.AddTriangle(0, 1, 2);
        vh.AddTriangle(2, 1, 3);
    }

    private Vector2 GetVerticalFrom(Vector2 from) {
        return new Vector2(-from.y,from.x);
    }

}

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

参考

在Unity中绘制UGUI曲线图
在Unity Graph绘制