bezier插值绕过打结问题-创新互联

html5 canvas bezierCurveTo涉及4个点：o(开始点),cp1（控制点1）,cp2（控制点2）,p（结束点）

当 o到p的走向（向量op）和cp1到cp2的走向（向量c12）相反时，就会出现打结的情况，我采取降级处理的方法，即发现会打结时，改为使用lineTo：

网站设计制作过程拒绝使用模板建站；使用PHP+MYSQL原生开发可交付网站源代码;符合网站优化排名的后台管理系统；做网站、网站建设收费合理；免费进行网站备案等企业网站建设一条龙服务.我们是一家持续稳定运营了十多年的创新互联网站建设公司。

    p = parts[i][j];
                var o = parts[i][j-1]; //p前面一点
                var cp1 = cps[2*(j-1)];
                var cp2 = cps[2*j-1];
                var op = p.subtract(o),c12=cp2.subtract(cp1);
                //绕过打结问题
                if(op.x*c12.x+op.y*c12.y>0) //控制点走向和折线走向一致
                    ctx.bezierCurveTo(cp1.x,cp1.y, cp2.x,cp2.y, p.x, p.y);
                else
                    ctx.lineTo(p.x,p.y);

向量夹角公式：

cosθ=向量a×向量b/|向量a|×|向量b| = (x1x2+y1y2)/[√(x1²+y1²)√(x2²+y2²)]

我将两向量夹角大于90度判定为两向量反向，
当180>θ>90时cosθ<0，夹角公式分母总为正，所以只要判定分子的正负即可。

---

过特征点平滑效果，可参考：
https://blog.csdn.net/u011284073/article/details/81385922

控制点的计算过程可以参考 http://turfjs.org/docs#bezierSpline 的源码，中点连线平移得到控制点，其使用的方法即：https://blog.csdn.net/ch_soft/article/details/7401582

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：bezier插值绕过打结问题-创新互联
转载来于：http://bzwzjz.com/article/isjes.html