CODEWITHSUNDEEP
javascriptcanvaskineticjs
dersvenhesse
dersvenhesse

Reputation: 6414

KineticJS: Rotate line around point

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/

Upvotes: 1

Views: 1650

Answers (1)

SoluableNonagon
SoluableNonagon

Reputation: 11755

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

So you need to set a position from the get go for your line, and set the points relative to the position:

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

Its not that it wasn't working, you were setting the position, then setting the points, which was really drawing your object off of the screen. You could see this happen if you set the transition time to a larger number and see it move off the screen slowly.

You also don't need to set the points again or reset the position.

Upvotes: 1

Related Questions