【Unity小功能开发实战教程】在UI画布上画网格线

👉一、前言

在大多软件中，网格线常常起到辅助线条的作用，像word中的网格线主要用来帮助用户将word文档中的图形、图像、文本框、艺术字等对象沿网格线对齐，并且在打印时网格线不被打印出来。接下来，我们就学习一下Unity中如何实现在UI画布上绘制网格线。

👉二、Unity上画网格线的效果

2.

3.

👉二、画网格线的原理

同样是使用了using UnityEngine.UI这个命名空间下的MaskableGraphic类来绘制网格线。
根据面向对象的思想，我们先抽象出画网格线的一些成员：线宽、线的颜色和线的间隔。
根据这些成员我们就可以计算得到一个个矩形面片的顶点信息，然后利用MaskableGraphic来绘制出一定数量的矩形面片，效果上形成我们想要的网格线样式。如下：
1.在水平方向上绘制出一条条垂直线

2.在垂直方向上绘制出一条条水平线

👉三、完整代码

using UnityEngine;
using UnityEngine.UI;

public class Grid : MaskableGraphic
{
    /// 

    /// 网格线间隔
    /// 
    public int gridSpace = 50;
    /// 

    /// 网格线的像素宽度
    /// 
    public float gridLineWidth = 1.0f;
    //可以自定义网格线颜色、如渐变色等，这里我是直接使用基类的颜色

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        vh.Clear();

        //取整数
        float width = Mathf.RoundToInt(rectTransform.rect.width);
        float height = Mathf.RoundToInt(rectTransform.rect.height);
        gridSpace = (int)Mathf.Clamp(gridSpace, 0, width);

        //先画水平方向上的线，从左到右绘制垂直线段
        for (int i = 0; i < width; i += gridSpace)
        {
            //四个点可以绘制一个矩形面片
            var horizontal_A = new Vector2(i, 0);
            var horizontal_B = new Vector2(i, height);
            var horizontal_C = new Vector2(i + gridLineWidth, height);
            var horizontal_D = new Vector2(i + gridLineWidth, 0);
            vh.AddUIVertexQuad(GetRectangleQuad(color, horizontal_A, horizontal_B, horizontal_C, horizontal_D));
        }
        //最后画垂直方向上的线，从下到上绘制水平线段
        for (int i = 0; i < height; i += gridSpace)
        {
            var vertical_A = new Vector2(0, i);
            var vertical_B = new Vector2(0, i + gridLineWidth);
            var vertical_C = new Vector2(width, i + gridLineWidth);
            var vertical_D = new Vector2(width, i);
            vh.AddUIVertexQuad(GetRectangleQuad(color, vertical_A, vertical_B, vertical_C, vertical_D));
        }
    }

     //得到一个矩形面片
    private UIVertex[] GetRectangleQuad(Color color, params Vector2[] points)
    {
        UIVertex[] vertexs = new UIVertex[points.Length];
        for (int i = 0; i < vertexs.Length; i++)
        {
            vertexs[i] = GetUIVertex(points[i], color);
        }
        return vertexs;
    }
    
    //得到一个顶点信息
    private UIVertex GetUIVertex(Vector2 point, Color color)
    {
        UIVertex vertex = new UIVertex
        {
            position = point,
            color = color,
            uv0 = Vector2.zero
        };
        return vertex;
    }
}
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

👉三、注意事项

1. 以上代码挂载到任意空物体即可使用。
2. 调整网格线参数时需手动输入数值看效果，如用鼠标拖拽改变数值过快可能导致Unity编辑器卡崩掉（目前还没定位到具体原因）。
3. 根据代码规律绘制网格线，需将空物体的锚点设置为（0,0）;布局设置为Left。（当然你可根据你的需要自定义，具体看你需要那种效果的网格线）