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

不是它不起作用，你设置位置，然后设置点，这实际上是从屏幕上绘制对象。如果您将转换时间设置为较大的数字并且看到它从屏幕上慢慢移开，您可能会看到这种情况。

您也无需再次设置点数或重置位置。

KineticJS：围绕点旋转线

1 个答案: