Html 使用kineticJs的Transition以特定角度在鼠标单击时旋转一个圆

我有一个有4个扇区的圆圈。单击扇区1和3时，圆圈应按特定角度旋转，如顺时针方向旋转45度；单击扇区2和4时，圆圈应按相同角度逆时针方向旋转。如何使用kineticJS的Transitiono方法实现

我正在使用

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

            });
     });

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

            });
     });

---

但是，在第一次单击之后，转换似乎不起作用。任何人都能说出旋转不一致的原因吗…每次旋转后我是否需要保存动力学层的上下文？？？

它似乎只在第一次单击时起作用的原因是您告诉圆旋转到一个特定角度。您需要通过将Math.PI/4添加到当前角度，告诉它每次旋转到新角度：

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

下面是一个JSFIDLE，其中有一个小演示，展示了不同之处：