1

I'm trying to rotate a line around a point using KineticJS. But the line always rotates around the origin. I already tried using a offset, but it didn't work either.

The black point is normally positionable. I want the gray line to rotate in angles between 0 and 360 around the black point.

line.setPoints([{
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2
}, {
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2 - 30
}]);

line.transitionTo({
    rotation: angle,
    duration: 1,
    easing: 'ease-out'
});

Any ideas?

I made a fiddle: http://jsfiddle.net/QuT4d/

4

1 に答える 1

1

http://jsfiddle.net/QuT4d/1/

したがって、最初から線の位置を設定し、その位置に関連するポイントを設定する必要があります。

    line = new Kinetic.Line({
        x: stage.getWidth() / 2,  // <--- right here
        y: stage.getHeight() / 2,  // <--- and right here
        points: [{
            x: 0,  // <--- if you start at 0, you start at the above x: which is the center
            y: 0   // <--- if you start at 0, you start at the above y: which is the center
        }, {
            x: 0,
            y: 0- 30
        }],
        stroke: 'gray',
        strokeWidth: 3
    });

機能していなかったわけではありません。位置を設定してからポイントを設定していたので、実際にオブジェクトが画面から外れていました。これは、トランジション タイムをより大きな数値に設定し、画面からゆっくりと移動する場合に発生する可能性があります。

ポイントを再設定したり、位置をリセットしたりする必要もありません。

于 2013-03-18T14:54:00.700 に答える