在kineticjs中獲取樣條點的切線

Question

如何獲得Kinetic.Spline的樣條點的切線。我正在使用KineticJS 4.7.2。

到目前爲止，沒有找到任何方法爲我提供這個方法。

非常感謝，曼努埃爾

Answer 1

動力學花鍵是二次/ Bezier曲線的組合（除非張力== 0）

因此可以近似切線在至少2各花鍵點方法。

的粗略估計是4個步驟：

1. 使用mySpline.getPoints（）來獲取所有連接點在你的花。
2. 使用Math.atan2計算連接點處進線/出線的弧度角。
3. 取這兩個角度的差值（給出該連接點的弧度角）。
4. 取該弧度角的切線。

更好的近似是更復雜：

1. 使用內部spline.allPoints得到彌補的樣條曲線所有的控制點。提示：第一個曲線是二次曲線，其他所有曲線都是三次Bezier曲線。
2. 在連接2條曲線的每個點處，找到非常靠近輸入曲線末端的點。
3. 在連接2條曲線的每個點上，找到非常接近出口曲線起點的點。
4. 使用Math.atan2來計算連接這兩個點的線段的角度。
5. 取該弧度角的切線。

獲取沿曲線

XY點，這些功能將幫助您相處的二次或三次Bezier曲線的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