Kinetic JS - 基于旋转另一个物体和逆时针旋转的图像旋转

时间:2013-04-02 23:11:38

标签: javascript image rotation kineticjs

我正在尝试使用鼠标角度旋转图像: 首先,我使用以下方法计算鼠标度:

                mouseX = parseInt(e.clientX - offsetX);
                mouseY = parseInt(e.clientY - offsetY);
                var mouse_x = e.pageX; var mouse_y = e.pageY;
                var radians = Math.atan2(mouse_y - crossY, mouse_x - crossX);
                if (radians < 0) radians += 2.0 * Math.PI;
                degree = (radians * 180 / Math.PI + 90) % 360;

然后我在舞台的中心做了一个圆圈(根据圆圈的位置重新计算偏移量);当我拖动圆圈时,图像会旋转,使用以下内容:

  circle2.on('dragmove', function (event) {
            var newangle = dImage1.getRotation();
            $("#newangle").html(newangle);
            dImage1.rotate((degree - newangle) / 36000); // I used 36000 as a factor to calibrate the degree of rotation
            dlayerA1.draw();
        });

第一个问题是我无法找出基于圆周旋转旋转图像的正确因子。第二个问题是我如何逆时针旋转圆圈?

完整演示位于http://jsfiddle.net/user373721/pz7W8/

非常感谢您的协助,谢谢您。

1 个答案:

答案 0 :(得分:0)

我相信.rotate()只会添加你想要的角度.setRotation(),它将允许向前和向后旋转;

http://jsfiddle.net/pz7W8/2/

    dImage1.setRotation((degree - newangle) / 180); // Keep experimenting what number to divide by