这个图形是一个略复杂的图形，至少需要三个点才能绘制出来。这个图形分为以下三部分：
箭尾：由绘制的第一个点和第二个点构成。
箭头：由绘制最后一个点、箭尾的中点和其他一些参数计算出来的总共5个点构成。
箭身：由除了箭尾和最后一个点之外的其他点计算得出，其中一个绘制点对应计算出来的两个点，左右依次连接构成。
下图是一个四个点的简易图形（这只是第一步，后面会详细介绍如何圆滑处理拐角部分）。
（图一）左为实际图形，右为简化的图形
计算图形所需要的固定值参数如下
图二
第一步：确定箭尾的顺序。pnts是用于绘制进攻方向的全部点，是经纬度坐标转成平面坐标后的坐标。判断前三个点是否为顺时针方向，若是，则第一个点为trailRight，第二个点为trailLeft；否则，第一个点为trailLeft，第二个点为trailRight。
（图三）确定箭尾顺序的代码
第二步：计算箭头的坐标点。通过trailLeft和trailRight计算箭尾的中点midTail，然后将pnts去掉箭尾的两点并在数组的开头插入midTail得到bonePnts，如下图所示
（图四）获取bonePnts的坐标
（图五）计算箭头的坐标点
计算bonePnts点的连线的长度为len；
len与headHeightFactor的乘积就是headHeight；
pnts（绘制图形所需的点）的最后一个点就是headPnt；
之后的len被赋值为headPnt与其前一个点的距离；
tailWidth为箭尾的宽度；
如果headHeight大于tailWidth*headTailFactor，那么headHeight将被重新复制为tailWidth*headTailFactor;
之后通过headHeight乘以相关的倍数得到headWidth、neckWidth和neckHeight
（图六）箭头的核心算法
headEndPnt就是headPnt沿着前一个点的方向，距离headHeight的点，同理neckEndPnt就是headPnt沿着前一个点的方向，距离headHeight的点；
headLeft和headRight是headEndPnt沿着headPnt的方向，旋转90°后距离headWidth的点；
neckLeft和neckRight是neckEndPnt沿着headPnt的方向，旋转90°后距离neckWidth的点；
最后将neckLeft、headLeft、headPnt、headRight和neckRight顺次放入数组中。
（图七）箭头算法的示意图
第三步：计算箭身的关键点
tailWidthFactor 为箭尾的宽度/bonePnts的长度
（图八）计算箭身的代码
allLen是bonePnts的总长度的0.99次幂，len是bonePnts的总长度；
widthDif是（箭尾的宽度-箭头颈部的宽度）/ 2；
然后从下标为1的点开始循环至倒数第二个点，每次循环计算当前点和前一个点和后一个点组成的角度的一半angle，以及当前的位置相较于tailWidth和neckWidth的宽度w，然后根据当前点的位置、angle和w计算出一组left和right。
（图九）计算箭身点的核心代码
（图十）循环计算得出多组left和right关键点
得到的箭身的点是左右两侧的点存放于一个数组当中，下图中的代码时将返回的箭身的关键点的左右两侧分开。
（图十一）箭身关键点分为左右两侧
第四步：拐角点的圆滑处理
至此，已经绘制出如图一所示的右侧的简易进攻方向，但相较于左侧的最终效果，拐角处不够圆滑。所以，接下来就是将拐角点变成很多的点，从而形成圆滑的视觉效果。
（图十二）圆滑处理的代码
（图十三）圆滑处理的核心算法一
（图十四）圆滑处理的核心算法二
计算出来的圆滑的点的实际效果如下图
将拐点圆滑处理后的效果图
第五步：将计算出来的所有点顺次连接组成多边形——进攻方向。
顺次连接所有点
网友评论