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;

    }

}

 

效果：