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]点，然后将矩形移动到这些点。

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

要使用Tween，您需要提供固定的结束值。因此，您无法使用补间。

因此，使用动画而不是补间可能更直接。

这是一个以间隔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;
}

如何在KineticJS中沿着贝塞尔曲线补间形状或组？

1 个答案: