1. 项目概述为什么我们需要一个可拖拽、可弯曲的连线组件在Unity的UI开发中UGUI提供了强大的基础组件但当你需要构建流程图、技能树、节点编辑器或者任何需要可视化连接关系的界面时你会发现官方库并没有提供一个现成的“连线”解决方案。你可能会尝试用Image画一条直线但如何让它动起来如何让它跟随鼠标拖拽如何让它像一根有弹性的橡皮筋一样可以弯曲这就是我们今天要动手解决的核心问题。这个项目就是要从零开始打造一个功能完备的UI连线组件。它不仅仅是画一条线而是一个完整的交互系统支持鼠标拖拽创建连线支持在两个UI节点间建立动态连接并且最关键的是连线本身可以像贝塞尔曲线一样平滑弯曲以绕过障碍物或实现更美观的布局。最终我会附上完整的、可直接复用的源码你可以直接拿去用在你的项目里无论是制作游戏内的天赋系统还是开发一个简易的原型工具。2. 核心架构设计与思路拆解2.1 需求分析与技术选型首先我们得明确这个组件要做什么。核心需求有三个可拖拽用户可以从一个UI元素我们称为“锚点”或“端口”按下鼠标拖出一条连线并释放到另一个锚点上完成连接。可弯曲连线不是僵直的线段而应该是一条曲线其弯曲程度和方向可以动态调整以提供更好的视觉引导和避免遮挡。UI化它必须完全基于UGUI的Canvas渲染体系能够正确处理层级、射线遮挡、屏幕自适应分辨率等问题。基于这些需求技术选型就清晰了渲染载体使用UGUI的Image组件来绘制连线。虽然LineRenderer是3D/2D场景中画线的常用选择但在UI层Image与Canvas的渲染顺序、Mask组件兼容性更好性能开销也更可控。曲线实现我们将采用二次贝塞尔曲线。它比三次贝塞尔更简单只有一个控制点计算量小并且足以实现平滑的弯曲效果。控制点的位置将决定曲线的弯曲方向和弧度。交互核心依赖EventTrigger组件或实现IBeginDragHandler,IDragHandler,IEndDragHandler等接口来处理拖拽事件。这是UGUI事件系统的标准做法。动态网格由于Image默认显示一个矩形Sprite要显示为曲线我们需要动态修改其顶点数据将其“扭曲”成一条带状的曲线网格。这涉及到对Mesh的直接操作。2.2 整体组件结构设计整个系统可以拆分为三个核心脚本职责分明UIDragConnection这是拖拽行为的发起者。它挂载在作为“起点”的UI锚点比如一个按钮上。负责监听该锚点上的拖拽开始事件并在拖拽开始时实例化一个“连线预览”对象。UIConnectionLine这是连线本体的核心控制器。它挂载在代表连线的那根“线”的GameObject上这个GameObject上有一个Image组件。它的职责最重管理连线的起点、终点以及控制点。根据这三个点实时计算并生成曲线的网格。响应起点或终点的位置变化动态更新连线。UIDropTarget这是拖拽行为的接收者。它挂载在作为“终点”的UI锚点上。负责判断拖拽的连线是否有效释放到自己身上并触发连接完成的回调。此外还需要一个管理器如ConnectionManager的可选脚本用于管理所有已创建的连线处理连线的创建、查找、删除等全局逻辑避免混乱。3. 核心细节解析与实操要点3.1 贝塞尔曲线的数学原理与网格生成二次贝塞尔曲线由起点(P0)、控制点(P1)和终点(P2)定义。曲线上任意一点B(t)的坐标可以通过以下公式计算其中t在0到1之间B(t) (1-t)² * P0 2 * (1-t) * t * P1 t² * P2但是Image组件需要的是一个由三角形构成的网格Mesh而不是一个数学公式。因此我们需要“采样”这条曲线。思路是将t从0到1分成若干等份比如20份计算每个t值对应的曲线点坐标。然后以这些点为中心根据一个设定的“线宽”向两侧偏移生成构成带状网格的顶点。具体步骤如下计算中心线点列根据当前P0, P1, P2采样得到N个曲线上的中心点。计算法线方向对于每个中心点除了首尾可以根据前后两个点计算出该点的切线方向再旋转90度得到法线方向。对于起点和终点可以使用相邻段的法线或指定方向。生成两侧顶点沿每个中心点的法线方向分别向两侧偏移“线宽/2”的距离得到左侧顶点和右侧顶点。这样N个中心点就生成了2N个网格顶点。构建三角形将顶点按顺序连接形成三角形带。例如顶点顺序为左1右1左2右2左3右3... 然后构建三角形(左1右1左2)、(右1左2右2)以此类推。这个过程需要在UIConnectionLine脚本的UpdateLineMesh()方法中每帧或当点位置变化时执行。我们需要直接操作Image组件底层的Mesh。注意直接修改Mesh是相对底层的操作。务必在修改顶点数组后调用mesh.vertices vertices和mesh.RecalculateBounds()来更新网格。同时为了碰撞检测正确可能还需要mesh.RecalculateNormals()但在UI中通常不需要光照所以不是必须的。3.2 拖拽交互的事件流与状态管理拖拽交互的逻辑链条必须清晰否则容易出现连线“鬼畜”或状态错乱。开始拖拽 (OnBeginDrag)在UIDragConnection中触发。实例化一个连线的Prefab包含UIConnectionLine组件。将该连线的起点设置为当前锚点位置。将连线的终点和控制点暂时都设置为当前鼠标位置世界坐标需转换为UI的RectTransform局部坐标。此时连线处于“预览”或“创建中”状态。拖拽中 (OnDrag)事件可能由UIDragConnection或一个全局的拖拽管理器处理。持续更新刚才创建的预览连线的终点位置为当前鼠标位置。控制点的计算是关键为了让曲线有自然的弯曲控制点不能简单地放在起点和终点的中点。一个常见的策略是将控制点设置为起点和终点连线的中点然后向垂直于该连线的方向偏移一定距离。偏移的方向可以根据拖拽方向动态决定例如总是偏向拖拽方向的某一侧或者固定向上/向下。公式示例控制点P1 (P0 P2) / 2 (法线方向 * 弯曲强度)。弯曲强度可以是一个固定值也可以与起点终点距离成比例。结束拖拽 (OnEndDrag)这是最复杂的环节。需要用到EventSystem.current.RaycastAll对鼠标位置进行UI射线检测获取所有位于指针下的UI元素。遍历这些元素查找其中是否有挂载了UIDropTarget组件的。如果找到了有效的投放目标将预览连线的终点“吸附”到该目标锚点的位置。调用UIDropTarget上的回调方法通知连接已建立。将连线状态从“预览”改为“已连接”。可选播放一个轻微的吸附动画或音效。如果未找到有效目标销毁这条预览连线表示取消创建。实操心得在拖拽过程中尤其是快速拖拽时鼠标可能已经移出了Canvas区域。为了确保连线终点始终跟随最好在OnDrag中使用Input.mousePosition并结合RectTransformUtility.ScreenPointToLocalPointInRectangle进行坐标转换即使鼠标不在Canvas内也能得到一个基于屏幕边缘的合理坐标避免连线突然消失。3.3 性能优化关键点网格更新与合批动态生成网格是一个开销较大的操作尤其是当屏幕上同时存在数十上百条动态连线时。避免每帧更新不要在任何脚本的Update()里无脑调用UpdateLineMesh()。只有当连线的起点、终点或控制点位置真正发生变化时才需要更新网格。可以为UIConnectionLine设置属性在属性的set访问器中触发更新。public Vector3 StartPos { get { return _startPos; } set { if (_startPos ! value) { _startPos value; UpdateLineMesh(); // 位置变化才更新 } } }控制网格精度采样点数即segmentCount直接决定了曲线的平滑度和顶点数量。在满足视觉要求的前提下应尽可能减少分段数。对于较短的连线10-15个分段可能就够了对于长连线可能需要20-30个。可以尝试根据连线长度动态调整分段数。UGUI合批考量UGUI的合批Batch能极大提升渲染效率。合批的前提是使用相同的材质Texture Atlas中的同一张图和相同的渲染状态。材质确保所有连线Image使用的都是同一张Sprite最好是放在一个图集Sprite Atlas中。这样它们就能被合批。层级尽量让所有连线在Canvas下的顺序接近避免被其他使用不同材质的UI元素隔断导致合批失败。Mask组件对连线使用Mask或RectMask2D会打断合批如果可能尽量用RectMask2D它的性能通常优于Mask但对于大量动态网格的裁剪仍需谨慎评估性能。4. 实操过程与核心环节实现4.1 第一步创建连线Prefab与基础组件在Unity中创建一个空GameObject命名为“ConnectionLinePrefab”。为其添加Image组件。选择一张简单的Sprite作为线的纹理比如一个纯白色小方块。将Image Type设置为Sliced或Tiled可能在某些简单直线情况下有用但对于曲线我们需要Simple类型因为网格将由我们完全控制。创建一个新的C#脚本UIConnectionLine并挂载到该Prefab上。在UIConnectionLine脚本中定义公共变量public RectTransform startPoint; public RectTransform endPoint; public float curveIntensity 100f; // 控制弯曲强度 public int segmentCount 20; // 曲线分段数 public float lineWidth 10f; // 线宽在Start()或Awake()方法中获取Image组件并创建一个新的Mesh对象赋值给它。private Image _image; private Mesh _mesh; void Awake() { _image GetComponentImage(); _mesh new Mesh(); _image.raycastTarget false; // 连线本身通常不需要接收射线 // 将mesh赋值给image需要一点技巧。通常通过修改顶点来实现。 // 更常见的做法是使用一个MeshFilter和MeshRenderer但在纯UI环境下 // 我们可以使用一个继承自MaskableGraphic的组件来完全自定义绘制。 // 为了简化这里我们采用一个替代方案使用一个独立的MeshRenderer子物体。 // 但为了纯粹UGUI我们可以创建一个UICurveLine组件继承自MaskableGraphic。 // 由于篇幅我们采用简化版假设我们允许在UI层使用一个简单的MeshRenderer。 }注意纯粹的UGUIImage组件不支持直接替换为自定义Mesh。一个更专业、更符合UGUI体系的做法是创建一个自定义的Graphic组件继承自MaskableGraphic重写其OnPopulateMesh方法。这能保证它完全参与UGUI的布局、合批和裁剪系统。下文将按此方案调整。4.2 第二步实现自定义Graphic组件绘制曲线新建一个C#脚本UICurveLine继承自MaskableGraphic。重写OnPopulateMesh方法。这是UGUI系统在需要刷新这个UI元素的顶点时调用的核心方法。我们在这里填充顶点和三角形数据。protected override void OnPopulateMesh(VertexHelper vh) { vh.Clear(); // 清空原有数据 if (startPoint null || endPoint null) return; Vector2 startPos RectTransformUtility.WorldToScreenPoint(null, startPoint.position); Vector2 endPos RectTransformUtility.WorldToScreenPoint(null, endPoint.position); Vector2 controlPos CalculateControlPoint(startPos, endPos); // 生成顶点和三角形 ListUIVertex vertices new ListUIVertex(); Listint triangles new Listint(); GenerateCurveMesh(startPos, endPos, controlPos, vertices, triangles); // 将数据填入VertexHelper vh.AddUIVertexStream(vertices, triangles); }实现GenerateCurveMesh方法。这是核心算法根据3.1节的步骤生成带状网格的顶点和三角形索引。private void GenerateCurveMesh(Vector2 p0, Vector2 p1, Vector2 p2, ListUIVertex verts, Listint indices) { // 1. 采样中心点 Vector2[] centerPoints new Vector2[segmentCount 1]; for (int i 0; i segmentCount; i) { float t i / (float)segmentCount; centerPoints[i] CalculateBezierPoint(t, p0, p1, p2); } // 2. 为每个中心点计算法线并生成左右顶点 UIVertex vertTemplate new UIVertex(); vertTemplate.color color; // 使用Graphic组件的颜色 for (int i 0; i centerPoints.Length; i) { Vector2 normal; if (i 0) { // 起点法线使用第一段的切线 normal (centerPoints[1] - centerPoints[0]).normalized; normal new Vector2(-normal.y, normal.x); // 旋转90度得到法线 } else if (i centerPoints.Length - 1) { // 终点法线使用最后一段的切线 normal (centerPoints[i] - centerPoints[i-1]).normalized; normal new Vector2(-normal.y, normal.x); } else { // 中间点法线前后两点的平均切线 Vector2 tangent (centerPoints[i1] - centerPoints[i-1]).normalized; normal new Vector2(-tangent.y, tangent.x); } Vector2 leftVert centerPoints[i] - normal * lineWidth * 0.5f; Vector2 rightVert centerPoints[i] normal * lineWidth * 0.5f; vertTemplate.position leftVert; verts.Add(vertTemplate); vertTemplate.position rightVert; verts.Add(vertTemplate); } // 3. 构建三角形索引 for (int i 0; i segmentCount; i) { int baseIndex i * 2; // 第一个三角形 indices.Add(baseIndex); indices.Add(baseIndex 1); indices.Add(baseIndex 2); // 第二个三角形 indices.Add(baseIndex 1); indices.Add(baseIndex 3); indices.Add(baseIndex 2); } }在UIConnectionLine脚本中现在它管理着UICurveLine组件当起点、终点位置变化时调用SetVerticesDirty()来触发OnPopulateMesh的重绘。public void UpdateLineVisual() { if (_curveLine ! null) { _curveLine.SetVerticesDirty(); // 标记顶点数据已脏下一帧UI系统会重绘 } }4.3 第三步实现拖拽创建逻辑创建UIDragConnection脚本实现IBeginDragHandler, IDragHandler, IEndDragHandler。public class UIDragConnection : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler { public GameObject connectionLinePrefab; // 连线Prefab public UIConnectionLine currentDraggingLine; // 当前正在拖拽的连线 public Transform connectionContainer; // 生成连线的父节点用于组织层级 public void OnBeginDrag(PointerEventData eventData) { if (connectionLinePrefab null) return; GameObject lineGo Instantiate(connectionLinePrefab, connectionContainer); currentDraggingLine lineGo.GetComponentUIConnectionLine(); currentDraggingLine.StartPoint this.transform; // 起点是当前锚点 currentDraggingLine.EndPoint this.transform; // 初始终点也在起点但会立刻更新 currentDraggingLine.SetDraggingState(true); } public void OnDrag(PointerEventData eventData) { if (currentDraggingLine null) return; // 将屏幕鼠标坐标转换为UI坐标 RectTransformUtility.ScreenPointToWorldPointInRectangle( currentDraggingLine.transform as RectTransform, eventData.position, eventData.pressEventCamera, out Vector3 worldPoint ); // 这里需要一个临时变换来代表鼠标位置或者直接更新EndPoint为一个虚拟变换的位置。 // 简化我们假设UIConnectionLine有一个方法可以直接设置终点世界坐标。 currentDraggingLine.SetEndPointWorldPosition(worldPoint); } public void OnEndDrag(PointerEventData eventData) { if (currentDraggingLine null) return; // 进行射线检测寻找投放目标 ListRaycastResult results new ListRaycastResult(); EventSystem.current.RaycastAll(eventData, results); UIDropTarget dropTarget null; foreach (var result in results) { dropTarget result.gameObject.GetComponentUIDropTarget(); if (dropTarget ! null dropTarget ! this.GetComponentUIDropTarget()) { // 不能是自己 break; } } if (dropTarget ! null) { // 有效投放 currentDraggingLine.EndPoint dropTarget.transform; currentDraggingLine.SetDraggingState(false); // 触发连接成功事件 OnConnectionEstablished?.Invoke(this, dropTarget); } else { // 无效投放销毁连线 Destroy(currentDraggingLine.gameObject); } currentDraggingLine null; } }创建UIDropTarget脚本它比较简单主要提供一个放置点和一个回调事件。public class UIDropTarget : MonoBehaviour { public UnityEventUIDragConnection onConnectionDropped; // 也可以提供一些视觉反馈比如高亮 }4.4 第四步连接管理与数据绑定一个健壮的系统需要管理连接关系。创建ConnectionManager单例或静态类。存储连接使用字典或列表来存储所有已建立的UIConnectionLine实例以及它们连接的起点和终点对象。提供接口CreateConnection(GameObject from, GameObject to): 编程式创建连接。RemoveConnection(UIConnectionLine line): 删除指定连接。FindConnections(GameObject node): 查找与某个节点相关的所有连接。持久化与序列化如果编辑器需要保存节点图管理器还需要负责将连接数据起点ID、终点ID、控制点偏移等序列化如保存为JSON或ScriptableObject。5. 常见问题与排查技巧实录5.1 连线渲染异常不显示、闪烁或位置错乱问题屏幕上什么都看不到或者连线一闪一闪的位置也不对。排查检查层级与裁剪确保连线所在的Canvas Render Mode设置正确并且没有父级的RectMask2D或Mask组件将其意外裁剪。可以临时禁用所有Mask组件测试。检查坐标空间这是最常见的问题。确保你在计算顶点位置时使用的坐标空间是一致的。OnPopulateMesh中的顶点位置应该是本地空间坐标。如果你使用了世界坐标或屏幕坐标需要转换到UI元素的本地空间。使用RectTransformUtility.ScreenPointToLocalPointInRectangle进行转换。检查Graphic组件确保自定义的UICurveLine组件被正确添加到Prefab上并且其Color属性不是完全透明Alpha为0。Raycast Target最好关闭。检查网格数据在GenerateCurveMesh方法中打印出生成的顶点位置看看是否在合理的范围内比如在RectTransform的矩形内。三角形索引顺序是否正确顺时针还是逆时针会影响正面渲染。5.2 拖拽手感不佳连线卡顿、延迟或无法准确投放问题拖拽时连线更新不跟手或者释放时很难对准目标。排查优化更新频率检查是否在OnDrag中进行了过于昂贵的操作如每帧实例化对象、复杂的物理计算。确保UpdateLineVisual方法被高效调用且SetVerticesDirty()不会在一帧内被调用多次。扩大投放区域UIDropTarget通常挂载在一个小按钮上投放区域太小。可以为其添加一个更大的透明Image作为子物体并将UIDropTarget挂在这个子物体上作为“热区”。使用Graphic Raycaster过滤确保你的UIDropTarget所在的Canvas有Graphic Raycaster组件并且层级顺序正确。有时其他全屏UI可能会拦截射线。添加视觉吸附在拖拽接近有效目标时可以动态地将连线终点“吸附”到目标中心并给与一个视觉反馈如高亮目标提升用户体验。这需要在OnDrag中实时进行距离检测。5.3 性能问题连线数量多时帧率下降问题当节点和连线增多时游戏变得卡顿。排查与优化Profile定位使用Unity Profiler查看是CPU耗时高可能是网格重建还是GPU耗时高可能是过度绘制。减少重绘这是关键。确保只有位置发生变化的连线才调用SetVerticesDirty()。对于静态的、已建立好的连线除非节点被移动否则不应重绘。降低网格精度动态调整segmentCount。对于很短的直线分段数可以降到5以下。可以实现一个根据线段长度计算分段数的函数。合并绘制如果所有连线材质相同UGUI本身会尝试合批。确保它们都在同一个Canvas下并且中间没有被其他不同材质的UI元素隔开。避免使用会打断合批的组件如Outline,Shadow除非必要。对象池频繁创建和销毁连线Prefab会产生GC。实现一个简单的对象池来管理连线对象的生命周期。5.4 曲线控制不自然弯曲方向奇怪或僵硬问题生成的曲线看起来不光滑或者总是朝一个方向弯不符合预期。调整控制点算法尝试不同的控制点计算策略。除了简单的中垂线偏移还可以让控制点跟随鼠标移动方向。例如计算起点到鼠标的方向向量将控制点设置在这个方向上的某一点。Vector2 dragDirection (mousePos - startPos).normalized; Vector2 perpendicular new Vector2(-dragDirection.y, dragDirection.x); // 垂直方向 controlPos (startPos mousePos) * 0.5f perpendicular * curveIntensity;动态弯曲强度让curveIntensity与拖拽距离成正比。拖得越远曲线可以越平缓拖得越近曲线弯曲更明显。这能模拟一种“弹性”感觉。采样率不足增加segmentCount可以让曲线更平滑但代价是顶点数增加。需要在视觉和性能间取得平衡。最后这个可拖拽、可弯曲的UI连线组件就搭建完成了。从事件交互到图形渲染从数据结构到性能调优每一个环节都需要仔细打磨。我提供的源码框架已经涵盖了核心功能你可以在此基础上根据自己项目的具体需求添加诸如连线类型实线、虚线、动画效果连接成功动画、流动效果、多段线、甚至更复杂的三次贝塞尔曲线支持。记住好的工具组件都是在解决实际问题的过程中不断迭代出来的。 Unity UGUI可拖拽贝塞尔曲线连线组件开发全解析
1. 项目概述为什么我们需要一个可拖拽、可弯曲的连线组件在Unity的UI开发中UGUI提供了强大的基础组件但当你需要构建流程图、技能树、节点编辑器或者任何需要可视化连接关系的界面时你会发现官方库并没有提供一个现成的“连线”解决方案。你可能会尝试用Image画一条直线但如何让它动起来如何让它跟随鼠标拖拽如何让它像一根有弹性的橡皮筋一样可以弯曲这就是我们今天要动手解决的核心问题。这个项目就是要从零开始打造一个功能完备的UI连线组件。它不仅仅是画一条线而是一个完整的交互系统支持鼠标拖拽创建连线支持在两个UI节点间建立动态连接并且最关键的是连线本身可以像贝塞尔曲线一样平滑弯曲以绕过障碍物或实现更美观的布局。最终我会附上完整的、可直接复用的源码你可以直接拿去用在你的项目里无论是制作游戏内的天赋系统还是开发一个简易的原型工具。2. 核心架构设计与思路拆解2.1 需求分析与技术选型首先我们得明确这个组件要做什么。核心需求有三个可拖拽用户可以从一个UI元素我们称为“锚点”或“端口”按下鼠标拖出一条连线并释放到另一个锚点上完成连接。可弯曲连线不是僵直的线段而应该是一条曲线其弯曲程度和方向可以动态调整以提供更好的视觉引导和避免遮挡。UI化它必须完全基于UGUI的Canvas渲染体系能够正确处理层级、射线遮挡、屏幕自适应分辨率等问题。基于这些需求技术选型就清晰了渲染载体使用UGUI的Image组件来绘制连线。虽然LineRenderer是3D/2D场景中画线的常用选择但在UI层Image与Canvas的渲染顺序、Mask组件兼容性更好性能开销也更可控。曲线实现我们将采用二次贝塞尔曲线。它比三次贝塞尔更简单只有一个控制点计算量小并且足以实现平滑的弯曲效果。控制点的位置将决定曲线的弯曲方向和弧度。交互核心依赖EventTrigger组件或实现IBeginDragHandler,IDragHandler,IEndDragHandler等接口来处理拖拽事件。这是UGUI事件系统的标准做法。动态网格由于Image默认显示一个矩形Sprite要显示为曲线我们需要动态修改其顶点数据将其“扭曲”成一条带状的曲线网格。这涉及到对Mesh的直接操作。2.2 整体组件结构设计整个系统可以拆分为三个核心脚本职责分明UIDragConnection这是拖拽行为的发起者。它挂载在作为“起点”的UI锚点比如一个按钮上。负责监听该锚点上的拖拽开始事件并在拖拽开始时实例化一个“连线预览”对象。UIConnectionLine这是连线本体的核心控制器。它挂载在代表连线的那根“线”的GameObject上这个GameObject上有一个Image组件。它的职责最重管理连线的起点、终点以及控制点。根据这三个点实时计算并生成曲线的网格。响应起点或终点的位置变化动态更新连线。UIDropTarget这是拖拽行为的接收者。它挂载在作为“终点”的UI锚点上。负责判断拖拽的连线是否有效释放到自己身上并触发连接完成的回调。此外还需要一个管理器如ConnectionManager的可选脚本用于管理所有已创建的连线处理连线的创建、查找、删除等全局逻辑避免混乱。3. 核心细节解析与实操要点3.1 贝塞尔曲线的数学原理与网格生成二次贝塞尔曲线由起点(P0)、控制点(P1)和终点(P2)定义。曲线上任意一点B(t)的坐标可以通过以下公式计算其中t在0到1之间B(t) (1-t)² * P0 2 * (1-t) * t * P1 t² * P2但是Image组件需要的是一个由三角形构成的网格Mesh而不是一个数学公式。因此我们需要“采样”这条曲线。思路是将t从0到1分成若干等份比如20份计算每个t值对应的曲线点坐标。然后以这些点为中心根据一个设定的“线宽”向两侧偏移生成构成带状网格的顶点。具体步骤如下计算中心线点列根据当前P0, P1, P2采样得到N个曲线上的中心点。计算法线方向对于每个中心点除了首尾可以根据前后两个点计算出该点的切线方向再旋转90度得到法线方向。对于起点和终点可以使用相邻段的法线或指定方向。生成两侧顶点沿每个中心点的法线方向分别向两侧偏移“线宽/2”的距离得到左侧顶点和右侧顶点。这样N个中心点就生成了2N个网格顶点。构建三角形将顶点按顺序连接形成三角形带。例如顶点顺序为左1右1左2右2左3右3... 然后构建三角形(左1右1左2)、(右1左2右2)以此类推。这个过程需要在UIConnectionLine脚本的UpdateLineMesh()方法中每帧或当点位置变化时执行。我们需要直接操作Image组件底层的Mesh。注意直接修改Mesh是相对底层的操作。务必在修改顶点数组后调用mesh.vertices vertices和mesh.RecalculateBounds()来更新网格。同时为了碰撞检测正确可能还需要mesh.RecalculateNormals()但在UI中通常不需要光照所以不是必须的。3.2 拖拽交互的事件流与状态管理拖拽交互的逻辑链条必须清晰否则容易出现连线“鬼畜”或状态错乱。开始拖拽 (OnBeginDrag)在UIDragConnection中触发。实例化一个连线的Prefab包含UIConnectionLine组件。将该连线的起点设置为当前锚点位置。将连线的终点和控制点暂时都设置为当前鼠标位置世界坐标需转换为UI的RectTransform局部坐标。此时连线处于“预览”或“创建中”状态。拖拽中 (OnDrag)事件可能由UIDragConnection或一个全局的拖拽管理器处理。持续更新刚才创建的预览连线的终点位置为当前鼠标位置。控制点的计算是关键为了让曲线有自然的弯曲控制点不能简单地放在起点和终点的中点。一个常见的策略是将控制点设置为起点和终点连线的中点然后向垂直于该连线的方向偏移一定距离。偏移的方向可以根据拖拽方向动态决定例如总是偏向拖拽方向的某一侧或者固定向上/向下。公式示例控制点P1 (P0 P2) / 2 (法线方向 * 弯曲强度)。弯曲强度可以是一个固定值也可以与起点终点距离成比例。结束拖拽 (OnEndDrag)这是最复杂的环节。需要用到EventSystem.current.RaycastAll对鼠标位置进行UI射线检测获取所有位于指针下的UI元素。遍历这些元素查找其中是否有挂载了UIDropTarget组件的。如果找到了有效的投放目标将预览连线的终点“吸附”到该目标锚点的位置。调用UIDropTarget上的回调方法通知连接已建立。将连线状态从“预览”改为“已连接”。可选播放一个轻微的吸附动画或音效。如果未找到有效目标销毁这条预览连线表示取消创建。实操心得在拖拽过程中尤其是快速拖拽时鼠标可能已经移出了Canvas区域。为了确保连线终点始终跟随最好在OnDrag中使用Input.mousePosition并结合RectTransformUtility.ScreenPointToLocalPointInRectangle进行坐标转换即使鼠标不在Canvas内也能得到一个基于屏幕边缘的合理坐标避免连线突然消失。3.3 性能优化关键点网格更新与合批动态生成网格是一个开销较大的操作尤其是当屏幕上同时存在数十上百条动态连线时。避免每帧更新不要在任何脚本的Update()里无脑调用UpdateLineMesh()。只有当连线的起点、终点或控制点位置真正发生变化时才需要更新网格。可以为UIConnectionLine设置属性在属性的set访问器中触发更新。public Vector3 StartPos { get { return _startPos; } set { if (_startPos ! value) { _startPos value; UpdateLineMesh(); // 位置变化才更新 } } }控制网格精度采样点数即segmentCount直接决定了曲线的平滑度和顶点数量。在满足视觉要求的前提下应尽可能减少分段数。对于较短的连线10-15个分段可能就够了对于长连线可能需要20-30个。可以尝试根据连线长度动态调整分段数。UGUI合批考量UGUI的合批Batch能极大提升渲染效率。合批的前提是使用相同的材质Texture Atlas中的同一张图和相同的渲染状态。材质确保所有连线Image使用的都是同一张Sprite最好是放在一个图集Sprite Atlas中。这样它们就能被合批。层级尽量让所有连线在Canvas下的顺序接近避免被其他使用不同材质的UI元素隔断导致合批失败。Mask组件对连线使用Mask或RectMask2D会打断合批如果可能尽量用RectMask2D它的性能通常优于Mask但对于大量动态网格的裁剪仍需谨慎评估性能。4. 实操过程与核心环节实现4.1 第一步创建连线Prefab与基础组件在Unity中创建一个空GameObject命名为“ConnectionLinePrefab”。为其添加Image组件。选择一张简单的Sprite作为线的纹理比如一个纯白色小方块。将Image Type设置为Sliced或Tiled可能在某些简单直线情况下有用但对于曲线我们需要Simple类型因为网格将由我们完全控制。创建一个新的C#脚本UIConnectionLine并挂载到该Prefab上。在UIConnectionLine脚本中定义公共变量public RectTransform startPoint; public RectTransform endPoint; public float curveIntensity 100f; // 控制弯曲强度 public int segmentCount 20; // 曲线分段数 public float lineWidth 10f; // 线宽在Start()或Awake()方法中获取Image组件并创建一个新的Mesh对象赋值给它。private Image _image; private Mesh _mesh; void Awake() { _image GetComponentImage(); _mesh new Mesh(); _image.raycastTarget false; // 连线本身通常不需要接收射线 // 将mesh赋值给image需要一点技巧。通常通过修改顶点来实现。 // 更常见的做法是使用一个MeshFilter和MeshRenderer但在纯UI环境下 // 我们可以使用一个继承自MaskableGraphic的组件来完全自定义绘制。 // 为了简化这里我们采用一个替代方案使用一个独立的MeshRenderer子物体。 // 但为了纯粹UGUI我们可以创建一个UICurveLine组件继承自MaskableGraphic。 // 由于篇幅我们采用简化版假设我们允许在UI层使用一个简单的MeshRenderer。 }注意纯粹的UGUIImage组件不支持直接替换为自定义Mesh。一个更专业、更符合UGUI体系的做法是创建一个自定义的Graphic组件继承自MaskableGraphic重写其OnPopulateMesh方法。这能保证它完全参与UGUI的布局、合批和裁剪系统。下文将按此方案调整。4.2 第二步实现自定义Graphic组件绘制曲线新建一个C#脚本UICurveLine继承自MaskableGraphic。重写OnPopulateMesh方法。这是UGUI系统在需要刷新这个UI元素的顶点时调用的核心方法。我们在这里填充顶点和三角形数据。protected override void OnPopulateMesh(VertexHelper vh) { vh.Clear(); // 清空原有数据 if (startPoint null || endPoint null) return; Vector2 startPos RectTransformUtility.WorldToScreenPoint(null, startPoint.position); Vector2 endPos RectTransformUtility.WorldToScreenPoint(null, endPoint.position); Vector2 controlPos CalculateControlPoint(startPos, endPos); // 生成顶点和三角形 ListUIVertex vertices new ListUIVertex(); Listint triangles new Listint(); GenerateCurveMesh(startPos, endPos, controlPos, vertices, triangles); // 将数据填入VertexHelper vh.AddUIVertexStream(vertices, triangles); }实现GenerateCurveMesh方法。这是核心算法根据3.1节的步骤生成带状网格的顶点和三角形索引。private void GenerateCurveMesh(Vector2 p0, Vector2 p1, Vector2 p2, ListUIVertex verts, Listint indices) { // 1. 采样中心点 Vector2[] centerPoints new Vector2[segmentCount 1]; for (int i 0; i segmentCount; i) { float t i / (float)segmentCount; centerPoints[i] CalculateBezierPoint(t, p0, p1, p2); } // 2. 为每个中心点计算法线并生成左右顶点 UIVertex vertTemplate new UIVertex(); vertTemplate.color color; // 使用Graphic组件的颜色 for (int i 0; i centerPoints.Length; i) { Vector2 normal; if (i 0) { // 起点法线使用第一段的切线 normal (centerPoints[1] - centerPoints[0]).normalized; normal new Vector2(-normal.y, normal.x); // 旋转90度得到法线 } else if (i centerPoints.Length - 1) { // 终点法线使用最后一段的切线 normal (centerPoints[i] - centerPoints[i-1]).normalized; normal new Vector2(-normal.y, normal.x); } else { // 中间点法线前后两点的平均切线 Vector2 tangent (centerPoints[i1] - centerPoints[i-1]).normalized; normal new Vector2(-tangent.y, tangent.x); } Vector2 leftVert centerPoints[i] - normal * lineWidth * 0.5f; Vector2 rightVert centerPoints[i] normal * lineWidth * 0.5f; vertTemplate.position leftVert; verts.Add(vertTemplate); vertTemplate.position rightVert; verts.Add(vertTemplate); } // 3. 构建三角形索引 for (int i 0; i segmentCount; i) { int baseIndex i * 2; // 第一个三角形 indices.Add(baseIndex); indices.Add(baseIndex 1); indices.Add(baseIndex 2); // 第二个三角形 indices.Add(baseIndex 1); indices.Add(baseIndex 3); indices.Add(baseIndex 2); } }在UIConnectionLine脚本中现在它管理着UICurveLine组件当起点、终点位置变化时调用SetVerticesDirty()来触发OnPopulateMesh的重绘。public void UpdateLineVisual() { if (_curveLine ! null) { _curveLine.SetVerticesDirty(); // 标记顶点数据已脏下一帧UI系统会重绘 } }4.3 第三步实现拖拽创建逻辑创建UIDragConnection脚本实现IBeginDragHandler, IDragHandler, IEndDragHandler。public class UIDragConnection : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler { public GameObject connectionLinePrefab; // 连线Prefab public UIConnectionLine currentDraggingLine; // 当前正在拖拽的连线 public Transform connectionContainer; // 生成连线的父节点用于组织层级 public void OnBeginDrag(PointerEventData eventData) { if (connectionLinePrefab null) return; GameObject lineGo Instantiate(connectionLinePrefab, connectionContainer); currentDraggingLine lineGo.GetComponentUIConnectionLine(); currentDraggingLine.StartPoint this.transform; // 起点是当前锚点 currentDraggingLine.EndPoint this.transform; // 初始终点也在起点但会立刻更新 currentDraggingLine.SetDraggingState(true); } public void OnDrag(PointerEventData eventData) { if (currentDraggingLine null) return; // 将屏幕鼠标坐标转换为UI坐标 RectTransformUtility.ScreenPointToWorldPointInRectangle( currentDraggingLine.transform as RectTransform, eventData.position, eventData.pressEventCamera, out Vector3 worldPoint ); // 这里需要一个临时变换来代表鼠标位置或者直接更新EndPoint为一个虚拟变换的位置。 // 简化我们假设UIConnectionLine有一个方法可以直接设置终点世界坐标。 currentDraggingLine.SetEndPointWorldPosition(worldPoint); } public void OnEndDrag(PointerEventData eventData) { if (currentDraggingLine null) return; // 进行射线检测寻找投放目标 ListRaycastResult results new ListRaycastResult(); EventSystem.current.RaycastAll(eventData, results); UIDropTarget dropTarget null; foreach (var result in results) { dropTarget result.gameObject.GetComponentUIDropTarget(); if (dropTarget ! null dropTarget ! this.GetComponentUIDropTarget()) { // 不能是自己 break; } } if (dropTarget ! null) { // 有效投放 currentDraggingLine.EndPoint dropTarget.transform; currentDraggingLine.SetDraggingState(false); // 触发连接成功事件 OnConnectionEstablished?.Invoke(this, dropTarget); } else { // 无效投放销毁连线 Destroy(currentDraggingLine.gameObject); } currentDraggingLine null; } }创建UIDropTarget脚本它比较简单主要提供一个放置点和一个回调事件。public class UIDropTarget : MonoBehaviour { public UnityEventUIDragConnection onConnectionDropped; // 也可以提供一些视觉反馈比如高亮 }4.4 第四步连接管理与数据绑定一个健壮的系统需要管理连接关系。创建ConnectionManager单例或静态类。存储连接使用字典或列表来存储所有已建立的UIConnectionLine实例以及它们连接的起点和终点对象。提供接口CreateConnection(GameObject from, GameObject to): 编程式创建连接。RemoveConnection(UIConnectionLine line): 删除指定连接。FindConnections(GameObject node): 查找与某个节点相关的所有连接。持久化与序列化如果编辑器需要保存节点图管理器还需要负责将连接数据起点ID、终点ID、控制点偏移等序列化如保存为JSON或ScriptableObject。5. 常见问题与排查技巧实录5.1 连线渲染异常不显示、闪烁或位置错乱问题屏幕上什么都看不到或者连线一闪一闪的位置也不对。排查检查层级与裁剪确保连线所在的Canvas Render Mode设置正确并且没有父级的RectMask2D或Mask组件将其意外裁剪。可以临时禁用所有Mask组件测试。检查坐标空间这是最常见的问题。确保你在计算顶点位置时使用的坐标空间是一致的。OnPopulateMesh中的顶点位置应该是本地空间坐标。如果你使用了世界坐标或屏幕坐标需要转换到UI元素的本地空间。使用RectTransformUtility.ScreenPointToLocalPointInRectangle进行转换。检查Graphic组件确保自定义的UICurveLine组件被正确添加到Prefab上并且其Color属性不是完全透明Alpha为0。Raycast Target最好关闭。检查网格数据在GenerateCurveMesh方法中打印出生成的顶点位置看看是否在合理的范围内比如在RectTransform的矩形内。三角形索引顺序是否正确顺时针还是逆时针会影响正面渲染。5.2 拖拽手感不佳连线卡顿、延迟或无法准确投放问题拖拽时连线更新不跟手或者释放时很难对准目标。排查优化更新频率检查是否在OnDrag中进行了过于昂贵的操作如每帧实例化对象、复杂的物理计算。确保UpdateLineVisual方法被高效调用且SetVerticesDirty()不会在一帧内被调用多次。扩大投放区域UIDropTarget通常挂载在一个小按钮上投放区域太小。可以为其添加一个更大的透明Image作为子物体并将UIDropTarget挂在这个子物体上作为“热区”。使用Graphic Raycaster过滤确保你的UIDropTarget所在的Canvas有Graphic Raycaster组件并且层级顺序正确。有时其他全屏UI可能会拦截射线。添加视觉吸附在拖拽接近有效目标时可以动态地将连线终点“吸附”到目标中心并给与一个视觉反馈如高亮目标提升用户体验。这需要在OnDrag中实时进行距离检测。5.3 性能问题连线数量多时帧率下降问题当节点和连线增多时游戏变得卡顿。排查与优化Profile定位使用Unity Profiler查看是CPU耗时高可能是网格重建还是GPU耗时高可能是过度绘制。减少重绘这是关键。确保只有位置发生变化的连线才调用SetVerticesDirty()。对于静态的、已建立好的连线除非节点被移动否则不应重绘。降低网格精度动态调整segmentCount。对于很短的直线分段数可以降到5以下。可以实现一个根据线段长度计算分段数的函数。合并绘制如果所有连线材质相同UGUI本身会尝试合批。确保它们都在同一个Canvas下并且中间没有被其他不同材质的UI元素隔开。避免使用会打断合批的组件如Outline,Shadow除非必要。对象池频繁创建和销毁连线Prefab会产生GC。实现一个简单的对象池来管理连线对象的生命周期。5.4 曲线控制不自然弯曲方向奇怪或僵硬问题生成的曲线看起来不光滑或者总是朝一个方向弯不符合预期。调整控制点算法尝试不同的控制点计算策略。除了简单的中垂线偏移还可以让控制点跟随鼠标移动方向。例如计算起点到鼠标的方向向量将控制点设置在这个方向上的某一点。Vector2 dragDirection (mousePos - startPos).normalized; Vector2 perpendicular new Vector2(-dragDirection.y, dragDirection.x); // 垂直方向 controlPos (startPos mousePos) * 0.5f perpendicular * curveIntensity;动态弯曲强度让curveIntensity与拖拽距离成正比。拖得越远曲线可以越平缓拖得越近曲线弯曲更明显。这能模拟一种“弹性”感觉。采样率不足增加segmentCount可以让曲线更平滑但代价是顶点数增加。需要在视觉和性能间取得平衡。最后这个可拖拽、可弯曲的UI连线组件就搭建完成了。从事件交互到图形渲染从数据结构到性能调优每一个环节都需要仔细打磨。我提供的源码框架已经涵盖了核心功能你可以在此基础上根据自己项目的具体需求添加诸如连线类型实线、虚线、动画效果连接成功动画、流动效果、多段线、甚至更复杂的三次贝塞尔曲线支持。记住好的工具组件都是在解决实际问题的过程中不断迭代出来的。