【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
{
    /// <summary>
    /// 网格线间隔
    /// </summary>
    public int gridSpace = 50;
    /// <summary>
    /// 网格线的像素宽度
    /// </summary>
    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. 调整网格线参数时需手动输入数值看效果,如用鼠标拖拽改变数值过快可能导致Unity编辑器卡崩掉(目前还没定位到具体原因)。
  3. 根据代码规律绘制网格线,需将空物体的锚点设置为(0,0);布局设置为Left。(当然你可根据你的需要自定义,具体看你需要那种效果的网格线)
    在这里插入图片描述
  • 7
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

周周的Unity小屋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值