1

Kinetic.Spline のスプライン ポイントのタンジェントを取得する方法を教えてください。KineticJS 4.7.2 を使用しています。

これまでのところ、これを提供する方法は見つかりませんでした。

どうもありがとう、マヌエル

4

1 に答える 1

1

キネティック スプラインは、2 次/ベジエ曲線の組み合わせです (テンション==0 の場合を除く)。

したがって、少なくとも 2 つの方法で各スプライン ポイントの接線を近似できます。

大まかな概算は、4 段階のプロセスです。

  1. mySpline.getPoints() を使用して、スプライン内のすべての接続ポイントを取得します。
  2. Math.atan2 を使用して、接続ポイントでの入力/出力ラインのラジアン角を計算します。
  3. これら 2 つの角度の差をとります (その接続点でのラジアン角を求めます)。
  4. そのラジアン角のタンジェントをとります。

より良い近似はより複雑です:

  1. 内部 spline.allPoints を使用して、スプラインを構成するすべての曲線の制御点を取得します。ヒント: 最初と最後の曲線は 2 次曲線で、その他はすべて 3 次ベジエ曲線です。
  2. 2 つの曲線を接続する各点で、入ってくる曲線の終点に非常に近い点を見つけます。
  3. 2 つの曲線を接続する各点で、出力曲線の始点に非常に近い点を見つけます。
  4. Math.atan2 を使用して、これら 2 点を結ぶ線分の角度を計算します。
  5. そのラジアン角のタンジェントをとります。

曲線に沿った 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 ソース コードを参照する必要がある場合は、次の場所にあります。

https://github.com/ericdrowell/KineticJS/blob/a2a4c6df2b231e9c133e67a80f49a9ac420e2f33/src/shapes/Spline.js

于 2013-10-11T17:16:57.047 に答える