Unity uses maskablegraphic to draw a line with an arrow

One 、 The principle of drawing arrow segments

utilize UGUI Of MaskableGraphic Class we can override OnPopulateMesh Function to draw multiple rectangular patches , Let several rectangular patches form a line segment with an arrow . Here's the picture ：

In a large rectangle UI The principle of redrawing a right arrow in the box is ：
from R1、R2、R3 and R4 Four vertices draw a small rectangle in the lower part of the head of the right arrow ：

from R1、R5、R6 and R7 Four vertices draw a small rectangle on the top half of the head of the right arrow ：

from R4、R8、R9 and R7 Draw a small rectangle of the arrow shaft with four vertices :

such , We just need to use 9 Vertex information is drawn 3 A small rectangle to form an arrow style line segment . Empathy , Put... In the vertex information of the right arrow x The axis coordinates are reversed , You can draw the left arrow ; Draw the left and right arrows , Then draw the middle arrow rectangle to form a left-right double arrow line segment . Please see the following core code and implementation effect for details .

Two 、 Core script and implementation effect

1、 Core script

DrawArrow.cs Script ：

using UnityEngine;
using UnityEngine.UI;

/// <summary>
///  Enumeration that defines the direction of the arrow 
/// </summary>
public enum DirectionType
{
    
    Right,
    Left,
    Both
}

public class DrawArrow : MaskableGraphic
{
    
    [SerializeField]
    private DirectionType arrowDirection = DirectionType.Right;// The default is the right arrow 
    public DirectionType ArrowDirection
    {
    
        set
        {
    
            arrowDirection = value;
            SetVerticesDirty();// After setting the arrow type, you need to redraw the vertex 
        }
    }
    public Color arrowColor = Color.black;// The default arrow color is black 
    public float arrowPixel = 1.0f;// The default arrow pixel is 1
    
    private float width;
    private float height;
    
    protected override void OnPopulateMesh(VertexHelper vh)
    {
    
        base.OnPopulateMesh(vh);
        vh.Clear();
        width = rectTransform.rect.width;// Get the rectangle UI The width of 
        height = rectTransform.rect.height;// Get the rectangle UI The height of 

        // Define the right arrow coordinate point 
        var R1 = new Vector3(width * 0.5f, 0, 0);// Right arrow vertex sharing point 
        var R2 = new Vector3(width * 0.5f - height * 0.5f, -height * 0.5f, 0);
        var R3 = new Vector3(width * 0.5f - height * 0.5f - arrowPixel, -(height * 0.5f - arrowPixel), 0);
        var R4 = new Vector3(width * 0.5f - arrowPixel, arrowPixel, 0);// Rectangle common point 
        var R5 = new Vector3(width * 0.5f - height * 0.5f, height * 0.5f, 0);
        var R6 = new Vector3(width * 0.5f - height * 0.5f - arrowPixel, height * 0.5f - arrowPixel, 0);
        var R7 = new Vector3(width * 0.5f - arrowPixel, -arrowPixel, 0);// Rectangle common point 
        var R8 = new Vector3(-width * 0.5f, arrowPixel, 0);
        var R9 = new Vector3(-width * 0.5f, -arrowPixel, 0);

        // Define the left arrow coordinate point , With the vertex of the right arrow X Opposite axis 
        var L1 = new Vector3(-R1.x, R1.y, R1.z);// Left arrow vertex sharing point 
        var L2 = new Vector3(-R2.x, R2.y, R2.z);
        var L3 = new Vector3(-R3.x, R3.y, R3.z);
        var L4 = new Vector3(-R4.x, R4.y, R4.z);// Rectangle common point 
        var L5 = new Vector3(-R5.x, R5.y, R5.z);
        var L6 = new Vector3(-R6.x, R6.y, R6.z);
        var L7 = new Vector3(-R7.x, R7.y, R7.z);// Rectangle common point 
        var L8 = new Vector3(-R8.x, R8.y, R8.z);
        var L9 = new Vector3(-R9.x, R9.y, R9.z);


        switch (arrowDirection)
        {
    
            case DirectionType.Right:// Draw the right arrow 
                vh.AddUIVertexQuad(GetRectangleQuad(arrowColor, R1, R2, R3, R4));// The lower part of the head of the right arrow is rectangular 
                vh.AddUIVertexQuad(GetRectangleQuad(arrowColor, R1, R5, R6, R7));// The top half of the head of the right arrow is rectangular 
                vh.AddUIVertexQuad(GetRectangleQuad(arrowColor, R4, R8, R9, R7));// The arrow shaft rectangle of the right arrow 
                break;
            case DirectionType.Left:// Draw the left arrow 
                vh.AddUIVertexQuad(GetRectangleQuad(arrowColor, L1, L2, L3, L4));
                vh.AddUIVertexQuad(GetRectangleQuad(arrowColor, L1, L5, L6, L7));
                vh.AddUIVertexQuad(GetRectangleQuad(arrowColor, L4, L8, L9, L7));
                break;
            case DirectionType.Both:// Draw left and right double arrows 
                 // The right arrow part has two rectangles 
                vh.AddUIVertexQuad(GetRectangleQuad(arrowColor, R1, R2, R3, R4));
                vh.AddUIVertexQuad(GetRectangleQuad(arrowColor, R1, R5, R6, R7));
                // The left arrow part has two rectangles 
                vh.AddUIVertexQuad(GetRectangleQuad(arrowColor, L1, L2, L3, L4));
                vh.AddUIVertexQuad(GetRectangleQuad(arrowColor, L1, L5, L6, L7));
                // The middle arrow shaft is rectangular 
                vh.AddUIVertexQuad(GetRectangleQuad(arrowColor, R4, R7, L7, L4));
                break;
        }

        
    }

    /// <summary>
    ///  Get rectangular patches , The four vertex information is drawn into a rectangle 
    /// </summary>
    private UIVertex[] GetRectangleQuad(Color _color, params Vector2[] vector2s)
    {
    
        UIVertex[] vertexs = new UIVertex[vector2s.Length];
        for (int i = 0; i < vertexs.Length; i++)
        {
    
            vertexs[i] = GetUIVertex(vector2s[i], _color);
        }
        return vertexs;
    }

    /// <summary>
    ///  obtain  UI The vertices 
    /// </summary>
    /// <param name="point"></param>
    /// <param name="color"></param>
    /// <returns></returns>
    private UIVertex GetUIVertex(Vector2 point, Color _color)
    {
    
        UIVertex vertex = new UIVertex
        {
    
            position = point,
            color = _color,
            uv0 = Vector2.zero
        };
        return vertex;
    }
}

Mount the script to UI On an empty object , Adjust its width and height （ It is best to 2:1 Or higher ）, Set the arrow type or color .

2、 Realization effect

Right arrow ：

left arrow ：

Left and right double arrows ：

3、 ... and 、 Recommended reading

When you understand MaskableGraphic After the principle of drawing graphics by class , You can use it to draw the pattern you want . You can also expand the arrow drawing code of this blog , Draw a gradient arrow segment or any arrow pattern you want . Here are some uses MaskableGraphic Blogs that draw other graphics , For your reference ：

Unity Draw a rectangular scale

Unity Realization UI The method of tracing