image - Kinetic JS - 根据鼠标角度旋转图像

Question

我正在尝试使用舞台上鼠标的角度在其中心旋转图像。它使用以下方式旋转：

  dlayerA1.rotate(degree);

但它飞来飞去而不是在它的中心旋转！完成项目http://jsfiddle.net/user373721/eHJgJ/。非常感谢您的建议，在此先感谢。

Answer 1

简单的解决方案是您根本没有旋转图像，而是在旋转图层，而且图层的中心为 0,0 ，因此您的图像围绕它旋转。如果您最初将图像设置为 0,0，您会发现它旋转得更好。

尝试这些简单的测试更改：

    // reposition the layer
    dlayerA1 = new Kinetic.Layer({x: 50,y: 50});

    //move the image
    dImage1 = new Kinetic.Image({
                x: 0,
                y: 0,
                image: dicom1,
                width: 150,
                height: 150
    });

    //inside handleMouseMove(), switch it to dImage1 being rotated <---- this is the fix that answers your original question
    dImage1.rotate(degree);