【Unity】UI画线工具

【Unity】UI画线工具

最近恰好遇到在图片上画线标记路径的需求，需要动态地画很多线，感觉做帧动画的话美术工作量有点大，所以做了一个功能比较简单的UI画线工具 UIPathwaySystem ： https://greenbamboo.coding.net/p/UIPathwaySystem/d/UIPathwaySystem/git 。

以下内容是对该工具的简介，内容与上面链接中给出的项目主页的说明相同。

---

基于UGUI制作的简单画线工具。

功能列表：

• 从多个起点开始绘制线段
• 单条线段分裂成多条线段
• 多条线段汇合成单条线段
• 线段跳转
• 设置线段颜色

使用限制：

• 不支持绘制平滑曲线（绘制平滑曲线可以考虑使用专门的图表插件）
• 不支持分辨率动态适配（可以实现但处理起来比较繁琐）

如何使用：

将 UGUIPathwaySystem/Prefabs/UIPathway.prefab 添加到任意 Canvas 对象下，这将会在Scene中添加一个 UIPathway 对象。 UIPathway 对象使用 UIWaypoint 对象来标记线路节点，在UIPathway 对象下添加、排列 UIWaypoint 对象并设置其间的连接关系即可设定画线规则。

在 UIWaypoint 对象中包含了一些属性，它们分别是：

• Type：节点类型
  • None：未指定功能的节点，系统将会提示错误
  • Start：起点，系统将会从起点向后绘制线段
  • Relay：中继点，用于连接前后的点
  • Jump：跳跃点，系统不会从该点向后绘制线段，而是直接跳转到后续节点开始绘制
  • End：终点，系统将会在终点结束绘制
• Time：从开始绘制线段到绘制到当前点所需经历的时间
• Color：节点颜色（当连线时使用后一个节点的颜色作为线段的颜色）
• Nexts：后续的节点
• AutoCalcTime[EditorOnly]：表示是否允许控制器根据节点之间的距离自动计算Time字段的值

在UIPathway 对象中包含了一些属性，它们分别是：

• LineWidth：线段宽度（像素）
• HeadRadius：线头半径（像素）
• LineTemplate[EditorOnly]：线段模板，用于生成新的线段
• HeadTemplate[EditorOnly]：线头模板，用于生成新的线头
• Waypoints[EditorOnly]：当前已经添加的线段节点
• Refresh[EditorOnly]：刷新数据（需要手动刷新数据才能检测到线段节点的变更）
• SpeedInPixel[EditorOnly]：画线速度，用于计算节点的Time字段的值
• AutoCalcWaypointsTime[EditorOnly]：自动计算节点的Time字段的值（只会影响 AutoCalcTime==true 的节点）
• ColorOverride[EditorOnly]：用于统一设置所有子节点的颜色
• OverrideColors[EditorOnly]：将所有子节点的颜色设置为 ColorOverride 字段的颜色
• SortWaypointsByTime[EditorOnly]：是否根据到达时间属性来对线段节点进行排序，辅助调试

当设置好画线规则后，点击 UIPathway 对象的 Inspector 面板中 UIPathController 组件下的 Refresh 按钮，系统将会检索当前添加的节点。

然后进入 Play 模式，调用 UIPathController 对象的 Play() 、 Pause() 、 Clear() 方法分别可以实现播放、暂停和清除绘制功能。其中 Play() 方法能够接受一个可选的 time 参数，该参数可以让画线工具将线段绘制到指定时间的状态。

备注：

上文中提到的 HeadTemplate 和 LineTemplate 是两个可以独立于画线工具使用的组件。 HeadTemplate 对象带有一个用于绘制正多边形的 RegularPolygonUIMesh 脚本；LineTemplate 对象带有一个用于绘制线段的 LineUIMesh 脚本，该脚本也可以用于绘制矩形（调整线宽即可）。