javascript - KineticJS：围绕点旋转线

Question

我正在尝试使用 KineticJS 围绕一个点旋转一条线。但这条线总是围绕原点旋转。我已经尝试过使用偏移量，但它也不起作用。

黑点通常是可定位的。我希望灰线围绕黑点以 0 到 360 度之间的角度旋转。

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

有任何想法吗？

我做了一个小提琴：http: //jsfiddle.net/QuT4d/

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

并不是说它不工作，您是在设置位置，然后设置点，这实际上是在将您的对象从屏幕上拉下来。如果您将过渡时间设置为较大的数字并看到它缓慢地移出屏幕，您可能会看到这种情况。

您也不需要再次设置点或重置位置。