# UIPathwaySystem

**Repository Path**: kch123/UIPathwaySystem

## Basic Information

- **Project Name**: UIPathwaySystem
- **Description**: ui界面路径绘制功能
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 4
- **Created**: 2020-09-23
- **Last Updated**: 2024-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

UI Pathway System
===

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

![Preview](./preview.gif)

**功能列表**：

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

**使用限制**：

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

**如何使用**：

将 *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` 脚本，该脚本也可以用于绘制矩形（调整线宽即可）。