在UI中畫一條曲線
我封裝了一個組件,可以實現基本的畫線需求.
效果
按住鼠標左鍵隨手一畫.
用起來也很簡單,將組件掛到空物體上就行了,紅色的背景是Panel.
你可以將該組件理解為一個Image,只不過形狀更靈活一些罷了,所以它要放在下面的層級(不然可能會被擋住).
代碼
可以調整一些基本的屬性,如線的顏色和粗細.
using System;
using UnityEngine.UI;
using UnityEngine;
using System.Collections.Generic;
using Unity.VisualScripting;[RequireComponent(typeof(CanvasRenderer))] //需要該組件才能生效
public class UILineRenderer : Graphic
{private readonly List<Vector2> points = new List<Vector2>(); // 用于存儲線條的點[SerializeField] private float lineWidth = 5f; // 線條寬度[SerializeField] private Color lineColor = Color.white; // 默認線條顏色//----用來測試,你應當使用自己的辦法調用DrawLine方法,后續刪除這部分-----private List<Vector2> points1 = new List<Vector2>(); // 用于存儲線條的點private void Update(){if (Input.GetMouseButtonDown(0)){points1.Clear();}else if (Input.GetMouseButton(0)){points1.Add(Input.mousePosition);DrawLine(points1);}else if (Input.GetMouseButtonUp(0)){foreach (var VARIABLE in points1){Debug.Log(VARIABLE);}}}//--------------------------------------------------------// 每次需要重新繪制UI時調用protected override void OnPopulateMesh(VertexHelper vh){vh.Clear(); // 清空當前頂點數據// 如果沒有足夠的點，則不繪制任何東西if (points == null || points.Count < 2)return;// 遍歷每個點，創建線段for (int i = 0; i < points.Count - 1; i++){Vector2 start = points[i];Vector2 end = points[i + 1];// 計算垂直方向的法線，使線條有寬度Vector2 direction = (end - start).normalized;Vector2 perpendicular = new Vector2(-direction.y, direction.x) * lineWidth / 2f;// 四個頂點（左下、左上、右上、右下）UIVertex vertex = UIVertex.simpleVert;vertex.color = lineColor; // 定義顏色// 左下vertex.position = new Vector3(start.x - perpendicular.x, start.y - perpendicular.y);vh.AddVert(vertex);// 左上vertex.position = new Vector3(start.x + perpendicular.x, start.y + perpendicular.y);vh.AddVert(vertex);// 右上vertex.position = new Vector3(end.x + perpendicular.x, end.y + perpendicular.y);vh.AddVert(vertex);// 右下vertex.position = new Vector3(end.x - perpendicular.x, end.y - perpendicular.y);vh.AddVert(vertex);// 添加兩個三角形來組成矩形線條int index = vh.currentVertCount;vh.AddTriangle(index - 4, index - 3, index - 2);vh.AddTriangle(index - 4, index - 2, index - 1);}}public void DrawLine(List<Vector2> pointArray){if (pointArray == null || pointArray.Count < 2) return;List<Vector2> newPoints = new List<Vector2>();foreach (Vector2 v2 in pointArray){Vector2 localPoint;RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, // 當前 UILineRenderer 的 RectTransformv2,null,out localPoint // 輸出的局部坐標);newPoints.Add(localPoint);}this.points.Clear();this.points.AddRange(newPoints);SetVerticesDirty();}/// <summary>/// 設置線的顏色/// </summary>/// <param name="newColor"></param>public void SetLineColor(Color newColor){lineColor = newColor;SetVerticesDirty();}/// <summary>/// 設置線的寬帶/// </summary>/// <param name="width"></param>public void SetWidth(float width){lineWidth = width;SetVerticesDirty();}/// <summary>/// 重置組件/// </summary>public void ResetSelf(){points.Clear();lineColor = Color.white;lineWidth = 5f;SetVerticesDirty();}
}?
?
