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);