Kinetic.Spline のスプライン ポイントのタンジェントを取得する方法を教えてください。KineticJS 4.7.2 を使用しています。
これまでのところ、これを提供する方法は見つかりませんでした。
どうもありがとう、マヌエル
Kinetic.Spline のスプライン ポイントのタンジェントを取得する方法を教えてください。KineticJS 4.7.2 を使用しています。
これまでのところ、これを提供する方法は見つかりませんでした。
どうもありがとう、マヌエル
キネティック スプラインは、2 次/ベジエ曲線の組み合わせです (テンション==0 の場合を除く)。
したがって、少なくとも 2 つの方法で各スプライン ポイントの接線を近似できます。
大まかな概算は、4 段階のプロセスです。
より良い近似はより複雑です:
曲線に沿った XY ポイントの取得
これらの関数は、2 次または 3 次ベジエ曲線に沿って XY を取得するのに役立ちます。
T=0.00 の場合、ポイントは曲線の一番最初になります。
T==1.00 の場合、ポイントは曲線の最後になります。
// quadratic bezier: T is 0-1
function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x;
var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y;
return( {x:x,y:y} );
}
// cubic bezier T is 0-1
function getCubicBezierXYatT(startPt,controlPt1,controlPt2,endPt,T){
var x=CubicN(T,startPt.x,controlPt1.x,controlPt2.x,endPt.x);
var y=CubicN(T,startPt.y,controlPt1.y,controlPt2.y,endPt.y);
return({x:x,y:y});
}
// cubic helper formula at T distance
function CubicN(pct, a,b,c,d) {
var t2 = pct * pct;
var t3 = t2 * pct;
return a + (-a * 3 + pct * (3 * a - a * pct)) * pct
+ (3 * b + pct * (-6 * b + b * 3 * pct)) * pct
+ (c * 3 - c * 3 * pct) * t2
+ d * t3;
}
また、スプラインの KineticJS ソース コードを参照する必要がある場合は、次の場所にあります。