文章目录
一、在 Canvas 画布中绘制箭头图形 - 要点分析
1、数据准备
2、绘制直线
3、绘制箭头尾翼
二、代码示例
一、在 Canvas 画布中绘制箭头图形 - 要点分析
----
1、数据准备...;
然后 , 计算出起始点到终止点的角度 , deltaY / deltaX 是该角度的正切 , 已知正切值 , 计算角度 , 使用 Math.atan2 函数即可 , 最终计算的角度是 该直线 与 x...根据该长度 , 确定箭头终点的坐标 ; 下图中蓝色的箭头 , 就是计算出的箭头尾部相对于起始点的增量 ;
// 设置箭头终点在直线的位置 , 根据比例计算出箭头长度
arrowLength..., 箭头的位置 ; 尾翼的起始点 arrowEndX, arrowEndY , 终止点需要根据角度计算出来 ;
// 绘制箭头 尾翼 线段 , 直线的角度 增减 45 度 , 即可获得尾翼的角度...// 返回的是 这条直线 与 x 轴的夹角
// deltaY / deltaX 是该角度的正切
// 已知正切值 , 计算角度 , 使用 Math.atan2 函数即可