基于Canvas实现路口渠化的绘制和配置功能（一）

前言

基于公司需求，在智慧交通项目中需要引入路口渠化配置的功能。基本功能是通过web端操作，实现路口车道，方向，灯位，检测器等配置，并实时反馈到真实路口中。

效果预览

暂定八方向路口的绘制，第一阶段实现了各路口根据属性绘制的结果。

开始

定义对象：由于路口的复杂性，因此分别定义RoadList（整理路口组）、Road（单个路口）、Lane（路口内单个车道）、WalkWay（人行道）。

更换坐标：由于canvas坐标系的特殊性，所以在画布中的坐标是这样的

导致定义各路口的坐标点位很复杂，因此将坐标系移动到画布中央，进行各方向坐标点的定义，在将坐标系平移回左上角。

所以在代码中定义了一些工具类，分别是

定义后，我们只需要以中心为坐标原点，进行各路口点位的计算，再调用moveCoordinate恢复至canvas坐标系进行绘图即可。