html5 canvas bezierCurveTo涉及4个点:o(开始点),cp1(控制点1),cp2(控制点2),p(结束点)
当 o到p的走向(向量op)和cp1到cp2的走向(向量c12)相反时,就会出现打结的情况,我采取降级处理的方法,即发现会打结时,改为使用lineTo:
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
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。