Question

我有一个包含4个扇区的圆圈。在点击扇区1和3时，圆圈应按特定角度旋转，例如顺时针方向45度，点击扇区2和4，圆圈应沿逆时针方向旋转相同的角度。如何使用kineticJS的transitionTo方法做到这一点？

我正在使用

    sector1.on("click", function() {
    circle.transitionTo({
                rotation: Math.PI/4,
                duration: 1

            });
     });

    sector2.on("click", function() {
    circle.transitionTo({
                rotation: -Math.PI/4,
                duration: 1

            });
     });

但第一次点击后转换似乎不起作用。任何人都可以告诉旋转不一致的原因......我是否需要在每次旋转时保存动力层的上下文???

Answer 1

它似乎仅适用于第一次点击的原因是您告诉圆圈将旋转到特定角度。您需要通过将Math.PI / 4添加到当前角度来告诉它每次旋转到一个新的角度：

circle.transitionTo({
            rotation: circle.getRotation() + Math.PI/4,
            duration: 1
        });
 });

这是一个带有小型演示的jsfiddle，显示了不同之处：http://jsfiddle.net/johnwiseman/WuZNg/

使用kineticJs的transitionTo在鼠标单击特定角度时旋转一个圆圈

1 个答案: