Unity-UI上画线

前言

Unity中画线的实现方式有很多，如Debug.Draw、Gizmos.Draw、GL等，但是这些都不好在UI上画线。其实通过Line Renderer组件就可以实现在UI上画线的功能。

先看一下效果图：

 

 

 

 

 

实现

首先介绍Line Renderer组件，官方链接，通过设置组件上Positions来达到画线的功能，比如我在随意画一下：

Scene和Game中效果为：

 

 

 

 

LineRenderer的自定义很高，可以很自由的设置它的属性，比如线宽、颜色、材质球、阴影等。

在代码中动态画线的方法也十分简单：

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

public class UIDrawLine : MonoBehaviour
{
    private LineRenderer line;
    private List<Vector3> linePos = new List<Vector3>();    //存储线的位置点

    private void Awake()
    {
        line = GetComponent<LineRenderer>();
    }
 
    /// <summary>
    /// 初始化线
    /// </summary>
    void InitLine()
    {
        line.startColor = Color.red;
        line.endColor = Color.yellow;
        line.startWidth = 0.02f;
        line.endWidth = 0.02f;
    }

    /// <summary>
    /// 画线
    /// </summary>
    void DrawLine()
    {
        line.positionCount = linePos.Count;
        line.SetPositions(linePos.ToArray());
    }
}

 

那么问题来了，怎么把线画到UI上？

首先我们添加一个UICamera让它只看UI、设置正交模式

 

 

然后添加画布，设置Canvas：设置为Camera模式，这样UI元素会处在最下层，线会显示在UI上

 

继续在Hierarchy面板添加Line（Line Renderer）即可画线了：

 

效果：

 

 

 

现在我们可以将线显示在UI上，剩下的是如何在“UI上画线”

这里我创建了个UI，在TestUI上画线，为方便管理，我把LineRenderer放TestUI下了

注册按下、拖拽、释放事件

 

 

 

 

脚本：

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

 

public class UIDrawLine : MonoBehaviour

{

    public LineRenderer line;

    public Canvas canvas;

    private float canvasScaler;     //画布的缩放比例

    private List<Vector3> linePos = new List<Vector3>();    //存储线的位置点

 

    private void Start()

    {

        Init();

    }

 

    /// <summary>

    /// 初始化

    /// </summary>

    void Init()

    {

        canvasScaler = canvas.transform.localScale.x;

        line.startWidth = 0.08f;

        line.endWidth = 0.08f;

    }

 

    /// <summary>

    /// 画线

    /// </summary>

    void DrawLine()

    {

        line.positionCount = linePos.Count;

        line.SetPositions(linePos.ToArray());

    }

 

    Vector3 value;

    private Vector3 InputConvert(Vector3 _vec)

    {

        value.z = 1;

        value.x = (_vec.x - Screen.width / 2f) * canvasScaler;

        value.y = (_vec.y - Screen.height / 2f) * canvasScaler;

        return value;

    }

 

    /// <summary>

    /// 鼠标按下

    /// </summary>

    public void OnPointerDown()

    {

        //Debug.Log("Down");

        line.positionCount = 0;

        linePos.Clear();

        linePos.Add(InputConvert(Input.mousePosition));

    }

 

    /// <summary>

    /// 鼠标拖拽

    /// </summary>

    public void OnDrag()

    {

        //Debug.Log("Drag");

        linePos.Add(InputConvert(Input.mousePosition));

        line.positionCount = linePos.Count;

        line.SetPositions(linePos.ToArray());

    }

 

    /// <summary>

    /// 鼠标释放

    /// </summary>

    public void OnPointerUp()

    {

        //Debug.Log("Up");

        line.positionCount = 0;

    }

}

 

效果：