0x00项目背景本项目用于高速公路监管。高速公路监理包括：高速公路设备运行、设备维修、道路养护；交通流量分析、交通拥堵分析、拥堵溯源；事故分析、事件信息发布等0x01设计图该项目目前主要是预览项目，因此设计图层面主要使用客户提供的图片。我们的设计团队参与度不高。下面是客户的设计图：0x02绘制道路的实际效果比较复杂，比如马路上有各种各样的线（斑马线、黄线、白线、实线、虚线等）。但这些都不是这个系统中最重要的元素，所以可以考虑忽略它们。因此，我们使用带有边缘效果的路径进行模拟，效果如下：绘制的逻辑其实很简单，先绘制线宽较大的路径，然后换成较小的线宽和不同的绘制路径一次的颜色。大致的绘制逻辑如下：ctx.save();ctx.beginPath();ctx.lineJoin='圆形';//ctx.lineCap='round';points.forEach(({x,y},index)=>{ctx[index?'lineTo':'moveTo'](x,y);})ctx.lineWidth=width;ctx.strokeStyle=sideColor;ctx.stroke();ctx.shadowBlur=0;ctx.globalCompositeOperation='source-over';ctx.lineWidth=宽度*0.5;ctx.strokeStyle=midColor;ctx.stroke();在编辑器中，添加一个道路组件，点击道路组件，就可以开始绘制道路了：editbydotPath，即可以编辑道路的方向。需要注意的是，技术上使用了自动平滑技术，原来的尖角会变得平滑。导出函数createSmoothCurvePoints(points,tension=0.5,closed=false,numberOfSegments=16){if(points.length<2){returnpoints;}//展开数组points=expandPointArr(points);letps=points.slice(0),//克隆数组，这样我们就不会改变原始结果=[],//结果点x,y,//我们的x,y坐标t1x,t2x,t1y,t2y,//张力向量c1,c2,c3,c4,//基点st,t,i;//基于段数的步骤//该算法需要指向实际点数组的前一个点和下一个点。//检查我们是绘制闭合曲线还是开放曲线。//如果关闭，则将结束点复制到开始，将第一个点复制到结束//如果打开，将第一个点复制到befinning，将结束点复制到结束if(closed){ps.unshift(points[points.length-1]);ps.unshift(points[points.length-2]);ps.unshift(points[points.length-1]);ps.unshift(points[points.length-2]);ps.push(点[0]);ps.push(点[1]);}else{ps.unshift(点[1]);//复制第一个点并在开头插入ps.unshift(points[0]);ps.push(points[points.length-2]);//复制最后一个点并追加ps.push(points[points.length-1]);}//1.循环遍历点数组//2.循环遍历前后2个点+1e个点之间的每段for(i=2;i
