如何在KineticJS中補間Shape或Group alogn貝塞爾曲線？

Question

我有一個形狀（RECT）和一個自定義形狀，它是（ARC）。 我如何在RECT之間注冊ARC？ 與SVG + SMIL中的PATH和MotionTween相同嗎？

 var triangle = new Kinetic.Shape({
    drawFunc: function(context) {
        context.beginPath();
        context.bezierCurveTo(0, 100, total_width / (total_width / 400), 100 / (total_width / 400), total_width, 100);
        context.setAttr('strokeStyle', 'red');
        context.setAttr('lineWidth', 4);
        context.stroke();
    },
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4
});

Answer 1

您可以沿Bezier曲線數學計算[x，y]點，然后將rect移動到這些點。

演示： http ： //jsfiddle.net/m1erickson/79kcZ/

要使用補間，需要提供固定的結束值。 因此，您不能使用補間。

因此，使用動畫而不是補間可能更直接。

這是一個函數，該函數沿間隔T沿三次方貝塞爾曲線計算[x，y]點。

當T == 0.00時，該點是曲線的起點。

當T == 1.00時，該點是曲線的終點。

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;
}