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