bezier插值繞過打結問題

html5 canvas bezierCurveTo涉及4個點:o(開始點),cp1(控制點1),cp2(控制點2),p(結束點)
bezier插值繞過打結問題
當 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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章