使用UGUI原生开发连线/画线
先上效果图：
红色就是连线的效果，可以用在状态机之间的连线，也可以通过简单修改，改为在图片上涂鸦。
注：如果使用的是LineRenderer实现的话虽然也能达到这个效果，但是不能与原生UI一致，导致不能使用遮罩，层级只能在其它UI的最上层或者最下层。
实现方法：
通过继承MaskableGraphic类，重写OnPopulateMesh(VertexHelper vh)方法，这样就可以在UGUI上自定义各种各样的自定义mesh了。
实现绘制mesh的方法：
①可以使用 VertexHelper.AddVert(UIVertex v) 这个方法增加好点位后还需要设置Triangle，调用VertexHelper.SetTriangle(int idx0, int idx1, int idx2)方法设置。
②也可以直接调用VertexHelper.AddUIVertexQuad(UIVertex[] verts) 此方法可以直接生成一个四边形，参数传入四边形的四个顶点，传入顺序是顺时针。
示例图：
v0-------v1
| |
v3-------v2
↑
lineWidth
这里使用的是第二种方法。参数传入顺序为V0 V1 V2 V3，先设置一个线条的粗细值lineWidth=2，很容易的就知道四边形四个点的坐标信息，这样就能绘制出一个四边形了。
然而这个线并不是直线，是弯曲的线，这样才自然。既然实现了一个四边形的绘制，那么如果想要组成线段，就需要对整条线段进行切分，
这条线右若干个四边形组成，如果要弯曲的话，这里引用的是三阶贝塞尔曲线。
贝塞尔曲线详情点击：https://www.cnblogs.com/yzxhz/p/13802952.html
注意的问题：
1.曲线有了，这里还有一点问题，在转弯折角处如果不进行处理的话，折角处外边会出现缺口，
解决办法：
将每个四边形的第一条边与上一个四边形的最后一条边（也就是两个四边形的接缝处的两条边）斜率保持相同即可。
2.当两个点左右换位置的时候，线段会出现绘制错乱问题。
解决办法：
注意两个点位的左右顺序，通过判断x的大小来判断哪个点在左边，哪个点在右边。
左右互换的话，两个贝塞尔的中间点位也要进行对称处理，还有初始第一条边的斜率向上改为向下。
增加射线检测：
线段绘制好后需要对线段部分和透明部分区分开可点击区域，通过继承ICanvasRaycastFilter接口，
实现IsRaycastLocationValid(Vector2 sp, Camera eventCamera)方法，可以达到此目的。
只要判断屏幕上的点在每一小段的四边形内部即可，如果存在一个四边形内部，就说明当前鼠标包含在线段内部了，就可以触发射线检测了。
具体实现的方式看下面源码即可。
完整代码如下：
using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class DrawLine : MaskableGraphic, ICanvasRaycastFilter { List<List<UIVertex>> vertexQuadList = new List<List<UIVertex>>(); public float lineWidth = 2; public Vector3 startPos; public Vector3 endPos; protected override void OnPopulateMesh(VertexHelper vh) { vh.Clear(); for (int i = 0; i < vertexQuadList.Count; i++) { vh.AddUIVertexQuad(vertexQuadList[i].ToArray()); } } void Update() { //设定rect大小正好能圈住线 rectTransform.position = endPos + (startPos - endPos) / 2f; rectTransform.sizeDelta = new Vector2(Mathf.Abs(endPos.x - startPos.x), Mathf.Abs(endPos.y - startPos.y)); AddVert(); } /// <summary> /// 增加点位 /// </summary> public void AddVert() { vertexQuadList.Clear(); //贝塞尔的两个中间点位，Start点位在左边和右边的情况区分 Vector3 tempMiddle1Pos = startPos + Vector3.Distance(startPos, endPos) / 5f * ((startPos.x < endPos.x) ? Vector3.right : Vector3.left); Vector3 tempMiddle2Pos = endPos + Vector3.Distance(startPos, endPos) / 5f * ((startPos.x < endPos.x) ? Vector3.left : Vector3.right); //增加贝塞尔点位 List<Vector3> bPoints = CreatThreeBezierCurve(startPos, endPos, tempMiddle1Pos, tempMiddle2Pos); //初始的方向设置为向上垂直方向 Vector3 lastVerticalDir = (startPos.x < endPos.x) ? Vector3.up : Vector3.down; for (int i = 0; i < bPoints.Count - 1; i++) { //当前的线段方向 Vector3 curDir = bPoints[i] - bPoints[i + 1]; //通过当前线段方向计算垂直方向 Vector3 curVerticalDir = Vector3.Cross(curDir.normalized, Vector3.forward).normalized; //已知两个相邻点位，并且已知线段的粗细，可以计算出四边形 List<UIVertex> vertexQuad = GetTwoPointMesh(bPoints[i], bPoints[i + 1], lastVerticalDir, curVerticalDir); vertexQuadList.Add(vertexQuad); lastVerticalDir = curVerticalDir; } SetVerticesDirty(); } /// <summary> /// 获得两个点之间的面片 /// </summary> /// <param name="vertexQuad"></param> private List<UIVertex> GetTwoPointMesh(Vector3 _startPos, Vector3 _endPos, Vector3 beforeTwoNodeVerticalDir, Vector3 nextTwoNodeVerticalDir) { List<UIVertex> vertexQuad = new List<UIVertex>(); // v0-------v1 // | | // v3-------v2 // ↑ // width Vector3 v0 = _startPos - beforeTwoNodeVerticalDir * lineWidth - rectTransform.position; Vector3 v1 = _startPos + beforeTwoNodeVerticalDir * lineWidth - rectTransform.position; Vector3 v3 = _endPos - nextTwoNodeVerticalDir * lineWidth - rectTransform.position; Vector3 v2 = _endPos + nextTwoNodeVerticalDir * lineWidth - rectTransform.position; UIVertex uIVertex = new UIVertex(); uIVertex.position = v0; uIVertex.color = color; vertexQuad.Add(uIVertex); UIVertex uIVertex1 = new UIVertex(); uIVertex1.position = v1; uIVertex1.color = color; vertexQuad.Add(uIVertex1); UIVertex uIVertex2 = new UIVertex(); uIVertex2.position = v2; uIVertex2.color = color; vertexQuad.Add(uIVertex2); UIVertex uIVertex3 = new UIVertex(); uIVertex3.position = v3; uIVertex3.color = color; vertexQuad.Add(uIVertex3); return vertexQuad; } /// <summary> /// 设置线段的碰撞 /// </summary> /// <param name="sp"></param> /// <param name="eventCamera"></param> /// <returns></returns> public bool IsRaycastLocationValid(Vector2 sp, Camera eventCamera) { bool isEnterMesh = false; for (int i = 0; i < vertexQuadList.Count; i++) { if (IsContainInQuad(sp, transform.position + vertexQuadList[i][0].position, transform.position + vertexQuadList[i][1].position, transform.position + vertexQuadList[i][2].position, transform.position + vertexQuadList[i][3].position)) { isEnterMesh = true; break; } } return isEnterMesh; } bool IsContainInQuad(Vector3 point, Vector3 p1, Vector3 p2, Vector3 p3, Vector3 p4) { // p1-----p2 // | | // | point | // | | // p4-----p3 Vector2 p1p2 = p1 - p2; Vector2 p1p = p1 - point; Vector2 p3p4 = p3 - p4; Vector2 p3p = p3 - point; Vector2 p4p1 = p4 - p1; Vector2 p4p = p4 - point; Vector2 p2p3 = p2 - p3; Vector2 p2p = p2 - point; bool isBetweenP1P2_P3P4 = CrossAB(p1p2, p1p) * CrossAB(p3p4, p3p) > 0; bool isBetweenP4P1_P2P3 = CrossAB(p4p1, p4p) * CrossAB(p2p3, p2p) > 0; return isBetweenP1P2_P3P4 && isBetweenP4P1_P2P3; } float CrossAB(Vector2 a, Vector2 b) { return a.x * b.y - b.x * a.y; } public float nultiple = 8; /// <summary> /// 三阶贝塞尔 /// </summary> /// <param name="startPoint"></param> /// <param name="endPoint"></param> /// <param name="middlePoint1"></param> public List<Vector3> CreatThreeBezierCurve(Vector3 startPoint, Vector3 endPoint, Vector3 middlePoint1, Vector3 middlePoint2) { List<Vector3> allPoints = new List<Vector3>(); for (int i = 0; i < nultiple; i++) { float tempPercent = (float)i / (float)nultiple; float dis1 = Vector3.Distance(startPoint, middlePoint1); Vector3 pointL1 = startPoint + Vector3.Normalize(middlePoint1 - startPoint) * dis1 * tempPercent; float dis2 = Vector3.Distance(middlePoint1, middlePoint2); Vector3 pointL2 = middlePoint1 + Vector3.Normalize(middlePoint2 - middlePoint1) * dis2 * tempPercent; float dis3 = Vector3.Distance(pointL1, pointL2); Vector3 pointLeft = pointL1 + Vector3.Normalize(pointL2 - pointL1) * dis3 * tempPercent; float dis4 = Vector3.Distance(middlePoint2, endPoint); Vector3 pointR1 = middlePoint2 + Vector3.Normalize(endPoint - middlePoint2) * dis4 * tempPercent; float dis5 = Vector3.Distance(pointL2, pointR1); Vector3 pointRight = pointL2 + Vector3.Normalize(pointR1 - pointL2) * dis5 * tempPercent; float disLeftAndRight = Vector3.Distance(pointLeft, pointRight); Vector3 linePoint = pointLeft + Vector3.Normalize(pointRight - pointLeft) * disLeftAndRight * tempPercent; allPoints.Add(linePoint); } allPoints.Add(endPoint); return allPoints; } }
场景中新建一个image，删掉image组件，挂上上面的代码即可。
调用的代码如下：
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; public class DragNode : MonoBehaviour, IDragHandler, IPointerDownHandler, IPointerUpHandler { DrawLine drawLine; GameObject lineGo; public void OnPointerDown(PointerEventData eventData) { lineGo = new GameObject("Line"); lineGo.transform.SetParent(transform); drawLine = lineGo.AddComponent<DrawLine>(); drawLine.startPos = Input.mousePosition; drawLine.endPos = Input.mousePosition; drawLine.color = Color.red; } public void OnDrag(PointerEventData eventData) { drawLine.endPos = Input.mousePosition; } public void OnPointerUp(PointerEventData eventData) { DestroyImmediate(lineGo); } }
补充：如果需要遮罩，加一句代码即可：
[RequireComponent(typeof(CanvasRenderer))]
public class DrawLine : MaskableGraphic, ICanvasRaycastFilter
就这样。拜拜~
