【Unity】UI画线工具

Unity 专栏收录该内容
57 篇文章 6 订阅

【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 参数,该参数可以让画线工具将线段绘制到指定时间的状态。

备注

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

  • 2
    点赞
  • 13
    评论
  • 16
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值