Unity 使用顶点自定义的方式实现引导黑幕

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(CanvasRenderer))]
public class GuideCanvas : MaskableGraphic, ICanvasRaycastFilter
{
    public Vector2 center = Vector2.zero;

    public Vector2 size = Vector2.one * 100;

    UIVertex[] buffer = new UIVertex[4];
    public Color sizeColor = Color.white; //引导遮罩颜色
    public bool IsRaycastLocationValid(Vector2 sp, Camera eventCamera)
    {
        throw new System.NotImplementedException();
    }

    private void Update()
    {
        SetAllDirty();
    }

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        vh.Clear();
        Vector4 outer = new Vector4(-rectTransform.pivot.x * rectTransform.rect.width,
               -rectTransform.pivot.y * rectTransform.rect.height,
             (1 - rectTransform.pivot.x) * rectTransform.rect.width,
             (1 - rectTransform.pivot.y) * rectTransform.rect.height);
        Vector4 inner = new Vector4(center.x - size.x / 2,
            center.y - size.y / 2,
            center.x + size.x * 0.5f,
            center.y + size.y * 0.5f);
        var vert = UIVertex.simpleVert;
        Vector2 uvOther = new Vector2(0.05f, 0.05f);

        //left 四个顶点
        vert.position = new Vector3(outer.x, outer.y);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[0] = vert;

        vert.position = new Vector3(outer.x, outer.w);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[1] = vert;

        vert.position = new Vector3(inner.x, outer.w);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[2] = vert;

        vert.position = new Vector3(inner.x, outer.y);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[3] = vert;

        vh.AddUIVertexQuad(buffer);

        //top 四个顶点
        vert.position = new Vector3(inner.x, inner.w);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[0] = vert;

        vert.position = new Vector3(inner.x, outer.w);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[1] = vert;

        vert.position = new Vector3(inner.z, outer.w);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[2] = vert;

        vert.position = new Vector3(inner.z, inner.w);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[3] = vert;

        vh.AddUIVertexQuad(buffer);

        //right 四个顶点
        vert.position = new Vector3(inner.z, outer.y);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[0] = vert;

        vert.position = new Vector3(inner.z, outer.w);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[1] = vert;

        vert.position = new Vector3(outer.z, outer.w);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[2] = vert;

        vert.position = new Vector3(outer.z, outer.y);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[3] = vert;

        vh.AddUIVertexQuad(buffer);

        //bottom 四个顶点
        vert.position = new Vector3(inner.x, outer.y);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[0] = vert;

        vert.position = new Vector3(inner.x, inner.y);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[1] = vert;

        vert.position = new Vector3(inner.z, inner.y);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[2] = vert;

        vert.position = new Vector3(inner.z, outer.y);
        vert.color = color;
        vert.uv0 = uvOther;
        buffer[3] = vert;

        vh.AddUIVertexQuad(buffer);


        //中间四角形
        vert.position = new Vector3(inner.x, inner.y);
        vert.color = sizeColor;
        vert.uv0 = new Vector2(0, 0);
        buffer[0] = vert;

        vert.position = new Vector3(inner.z, inner.y);
        vert.color = sizeColor;
        vert.uv0 = new Vector2(1, 0);
        buffer[1] = vert;

        vert.position = new Vector3(inner.z, inner.w);
        vert.color = sizeColor;
        vert.uv0 = new Vector2(1, 1);
        buffer[2] = vert;

        vert.position = new Vector3(inner.x, inner.w);
        vert.color = sizeColor;
        vert.uv0 = new Vector2(0, 1);
        buffer[3] = vert;

        vh.AddUIVertexQuad(buffer);
    }
}

把上述脚本挂到一个Canvas下面的空物体上，然后设置脚本上的参数既可以运行一个简单Demo