openlayers plot 二维标绘算法简单分析

 

直箭头：

                       

直箭头由两个控制点来计算，在绘制时，需要两笔来绘制，可以是箭身的直线一笔加上箭头的一笔折线。

细直箭头、进攻箭头：

 

 

计算箭头尾部中点，加上其余的控制点作为骨架点；箭头的宽和高要跟随箭头总长度与箭头尾部的宽度来变化，箭头两翼的宽度，脖子宽度、高度根据箭头的高度变化；

箭身：首先计算箭尾宽度与脖子宽度的差值作为箭身宽度渐变总量，然后根据每个除箭头箭尾之外的控制点与箭尾的距离计算当前箭身宽度，再旋转求左右边线

float widthDif = (tailWidth - neckWidth) / 2; //1/2宽度差

float w = (tailWidth / 2 - tempLen / allLen * widthDif) / sin(angle); //除以sin(angle) 是考虑到弯曲程度

Point left = PlotUtil::getThirdPoint(points[i - 1], points[i], PI - angle, w, true);  //左旋PI-angle个角度，去长度w

Point right = PlotUtil::getThirdPoint(points[i - 1], points[i], angle, w, false);

//右旋angle个角度，取长度w

 

然后根据求得的箭身左右边线点，使用二次贝塞尔曲线插值

突击方向：

箭头角度为45°

进攻箭头（尾）：

 

骨架点方向固定长度位置取凹陷点

 

双箭头：

左边为一段贝塞尔曲线，加上中间一段贝塞尔曲线，右边一段贝塞尔曲线；左曲线与右曲线连成曲线外侧，中间曲线连成曲线内侧。路径顺序分别为：左曲线、箭头点、内曲线、箭头点、右曲线、闭合

 

双箭头要分解为两个单箭头来求，对与每一个单箭头来说，骨架控制点只有箭尾中点与箭头端点，所以要插值两个点，openlayers计算了3/10长度处一个点，1/2长度处一个点，然后旋转90°得到4个控制点，然后箭头和箭身的计算方法就和进攻箭头类似了，只不过中间的曲线要联合两个箭头的部分数据进行贝塞尔插值。

 

聚集地：

    

由四段三次贝塞尔曲线组成

重点在于计算每一段贝塞尔曲线的控制点，求相邻三个点的角平分线的切线，取与边相应比例的延申长度

 

转载于:https://www.cnblogs.com/T-C-hong-dou/p/10982670.html