效果
1.界面设置
2.涉及两个脚本UIDraw.cs和UIDrawLine.cs
UIDraw.cs
using System;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;public class UIDraw : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler , IPointerDownHandler, IPointerUpHandler
{public Color DrawColor = Color.red;[Range(3,10)]public int DrawWidth = 3;public Color BgColor = new Color(0, 0, 0, 0);Vector2 lastPosition;public UIDrawLine UIDrawLine;List<Vector2> Vertics = new List<Vector2>();List<List<Vector2>> CachVertics = new List<List<Vector2>>();void Awake(){}public RectTransform Drawer;void Update(){if (canDraw){Drawer.position = Input.mousePosition;DrawPoint(Drawer.anchoredPosition);#if UNITY_ANDROID||UNITY_IPHONE #endif}}public void OnPointerDown(PointerEventData eventData){canDraw = true;}public void OnPointerUp(PointerEventData eventData){canDraw = false;//添加结尾lastPosition = Vector2.zero;AddPoint(lastPosition);//添加到缓存AddToCach();}bool canDraw;public void OnPointerEnter(PointerEventData eventData){}public void OnPointerExit(PointerEventData eventData) {lastPosition = Vector2.zero;AddPoint(lastPosition);}public void DrawPoint(Vector2 point){if (lastPosition == Vector2.zero){lastPosition = point;}UpdateColor(lastPosition, point, DrawWidth, DrawColor);}public void UpdateColor(Vector2 start_point, Vector2 end_point, int width, Color color){float distance = Vector2.Distance(start_point, end_point);if (distance < 0.1f) return;AddPoint(end_point) ;lastPosition = end_point;}void AddPoint(Vector2 v){Vertics.Add(v);UIDrawLine.Vertices.Add(v);UIDrawLine.SetAllDirty();}private void AddToCach(){List<Vector2> list = new List<Vector2>();list.AddRange(Vertics);CachVertics.Add(list);Vertics.Clear();}public void UnDo(){if (CachVertics.Count == 0) return;CachVertics.RemoveAt(CachVertics.Count-1);UIDrawLine.Vertices.Clear();for (int i = 0; i < CachVertics.Count; i++){UIDrawLine.Vertices.AddRange(CachVertics[i]);}UIDrawLine.SetAllDirty();}public void Send(){//UIDrawLine.Vertices;Clear();//gameObject.SetActive(false);}internal void Clear(){UIDrawLine.Vertices.Clear();UIDrawLine.SetAllDirty();Vertics.Clear();CachVertics.Clear();}void OnDisable() {Clear();}}
UIDrawLine.cs
using System;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;[AddComponentMenu("UI/Extensions/UI Line")]
public class UIDrawLine : MaskableGraphic
{[SerializeField]Texture m_Texture;public float thickness = 5;public List<Vector2> Vertices=new List<Vector2> ();private float size = 0;public override Texture mainTexture{get{return m_Texture == null ? s_WhiteTexture : m_Texture;}}public Texture texture{get{return m_Texture;}set{if (m_Texture == value) return;m_Texture = value;SetVerticesDirty();SetMaterialDirty();}}protected override void OnEnable(){Vertices.Clear();}void Update(){}protected UIVertex[] SetVbo(Vector2[] vertices, Vector2[] uvs){UIVertex[] vbo = new UIVertex[4];for (int i = 0; i < vertices.Length; i++){var vert = UIVertex.simpleVert;vert.color = color;vert.position = vertices[i];vert.uv0 = uvs[i];vbo[i] = vert;}return vbo;}//生成方格的四个点protected override void OnPopulateMesh(VertexHelper vh){vh.Clear();Vector2 uv0 = new Vector2(0, 1);Vector2 uv1 = new Vector2(1, 1);Vector2 uv2 = new Vector2(1, 0);Vector2 uv3 = new Vector2(0, 0);Vector2 lastPos0 = Vector2.zero;Vector2 lastPos1 = Vector2.zero;Vector2 lastPos2 = Vector2.zero;Vector2 lastPos3 = Vector2.zero;for (int i = 1; i < Vertices.Count; i++){//当有0是说明是结束点，开始下个画线if (Vertices[i - 1]==Vector2.zero || Vertices[i]== Vector2.zero){lastPos0 = Vector2.zero;continue;}Vector2 v = Rotate90(Vertices[i] - Vertices[i - 1]).normalized;Vector2 pos0 = Vertices[i - 1]- v * thickness * 0.5f;Vector2 pos1 = Vertices[i]- v * thickness * 0.5f;Vector2 pos2 = pos1 + v * thickness;Vector2 pos3 = pos0 + v * thickness;vh.AddUIVertexQuad(SetVbo(new[] { pos0, pos1, pos2, pos3 }, new[] { uv0, uv1, uv2, uv3 }));//角if (lastPos0!=Vector2.zero){Vector2 p0 = pos0;Vector2 p1 = lastPos1;Vector2 p2 = pos3;Vector2 p3 = lastPos2;vh.AddUIVertexQuad(SetVbo(new[] { p0, p1, p2, p3 }, new[] { uv0, uv1, uv2, uv3 }));}lastPos0 = pos0;lastPos1 = pos1;lastPos2 = pos2;lastPos3 = pos3;}}private Vector2 Rotate90(Vector2 p){return new Vector2(p.y, -p.x);}}
