html - 使用 kineticJs 的 transitionTo 在鼠标点击时按特定角度旋转圆圈

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/