KineticJS: Rotate line around point

Question

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/

Answer 1

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.