# 绘制带有末端样式的线段 ::: details 目录 [[toc]] ::: ## 函数入参 传入线段和末端样式```style{begin?:SArrowStyleType,end?:SArrowStyleType}``` ``` typescript drawArrowLine(line: SLine, style?: SArrow):void ``` 传入线段的两个点和末端样式 ``` typescript drawArrowLine(p1: SPoint, p2: SPoint, style?: SArrow): void; ``` 传入线段的两个点的坐标值和末端样式 ``` typescript drawArrowLine(x1: number,y1: number,x2: number,y2: number,style?: SArrow): void; ``` ::: details 查看代码 <<< @/docs/.vuepress/components/engine/arrow.vue ::: ## 类型 ### 无 不绘制任意箭头 ### 标准箭头 绘制如下类型箭头 ![标准箭头](./img/basic-arrow.png) #### 画法描述 1.将坐标系平移至线段终点; 2.计算出线段与x轴夹角,并将坐标系旋转至x轴与线段重合; 3.设定箭头夹角为```θ=π/2```,末端三角形边长```d=5```,则箭头上下端与x轴夹角为```π/4```,根据此角度与边长计算上下端坐标; 4.直接绘制原点与上下端连线的折线图形即可; ![标准箭头计算](./img/basic-jisuan.png) ``` javascript // 定义箭头长度 const d = 5; // 箭头横坐标 const x1 = d * Math.cos(Math.PI / 4); // 箭头纵坐标 const y1 = d * Math.sin(Math.PI / 4); // 线段与x轴夹角 const fo = Math.atan(line.dy / line.dx); const ang = line.dx >= 0 ? fo : fo + Math.PI; this.save(); this.translate(line.x2, line.y2); this.rotate(ang); this.engine.drawPolyline([ new SPoint(-x1, y1), new SPoint(0, 0), new SPoint(-x1, -y1) ]); this.restore(); ``` ### 三角形 绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色 ![三角形箭头](./img/triangle-arrow.png) #### 画法描述 坐标点位置计算与标准箭头类似,只是箭头夹角```θ=π/6```,且最后绘制图形为多边形 ``` javascript // 定义箭头长度 const d = 5; // 箭头横坐标 const x1 = d * Math.cos(Math.PI / 4); // 箭头纵坐标 const y1 = d * Math.sin(Math.PI / 4); // 线段与x轴夹角 const fo = Math.atan(line.dy / line.dx); const ang = line.dx >= 0 ? fo : fo + Math.PI; this.save(); this.translate(line.x2, line.y2); this.rotate(ang); this.engine.drawPolygon([ new SPoint(-x1, y1), new SPoint(0, 0), new SPoint(-x1, -y1) ]); this.restore(); ``` ### 圆 绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色 ![圆形箭头](./img/circle-arrow.png) #### 画法描述 1.将坐标系平移至线段终点; 2.设定圆半径```r=5```,计算圆心坐标为(-r,0),绘制圆形即可 ![圆形计算](./img/circle-jisuan.png) ``` javascript // 定义箭头长度 const d = 5; // 线段与x轴夹角 const fo = Math.atan(line.dy / line.dx); const ang = line.dx >= 0 ? fo : fo + Math.PI; this.save(); this.translate(line.x2, line.y2); this.rotate(ang); this.engine.drawCircle(-d / 2, 0, d / 2); this.restore(); ``` ### 菱形 绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色 ![菱形箭头](./img/diamond-arrow.png) #### 画法描述 坐标点位置计算与标准箭头类似,只需多计算一个点,绘制图形为多边形 ![菱形计算](./img/diamond-jisuan.jpg) ``` javascript // 定义箭头长度 const d = 5; // 箭头横坐标 const x1 = d * Math.cos(Math.PI / 4); // 箭头纵坐标 const y1 = d * Math.sin(Math.PI / 4); // 线段与x轴夹角 const fo = Math.atan(line.dy / line.dx); const ang = line.dx >= 0 ? fo : fo + Math.PI; this.save(); this.translate(line.x2, line.y2); this.rotate(ang); this.engine.drawPolygon([ new SPoint(-x1, y1), new SPoint(0, 0), new SPoint(-x1, -y1), new SPoint(-Math.sqrt(2) * d, 0) ]); this.restore(); ``` ### 方形 绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色 ![方形箭头](./img/square-arrow.png) #### 画法描述 1.将坐标系平移至线段终点; 2.可以计算四个顶点坐标,绘制多边形;亦可移至计算出的原点,直接绘制矩形; ![方形计算](./img/square-jisuan.png) ``` javascript // 定义箭头长度 const d = 5; // 线段与x轴夹角 const fo = Math.atan(line.dy / line.dx); const ang = line.dx >= 0 ? fo : fo + Math.PI; this.save(); this.translate(line.x2, line.y2); this.rotate(ang); this.engine.drawPolygon([ new SPoint(-d, d / 2), new SPoint(0, d / 2), new SPoint(0, -d / 2), new SPoint(-d, -d / 2) ]); this.restore(); ```