拖放使用拉斐爾js

我想在JavaScript中使用拉斐爾來建立一個益智遊戲，照顧拖放和旋轉的件。拖放使用拉斐爾js

我面臨的問題是：每當我旋轉一個圖像，其座標系也被旋轉，拖放不再按預期工作。

編輯2：這是一個簡單的測試用例。圍繞橢圓拖動，將其旋轉，然後再次嘗試拖動： http://www.tiagoserafim.com/tests/dragdrop.html

編輯：澄清，每當我移動1個像素用鼠標向右（X ++），該圖像也移動在x爲1周的象素-coord，但在其自己的座標系中，可能會旋轉，如下圖所示。

alt text http://commons.oreilly.com/wiki/images/f/fa/SVG_Essentials_I_5_tt93.png

由於上SVG Essentials解釋說，這是預期的行爲。

我的問題是：是否有一個優雅的方式來做我想做的事，或者我將被迫通過使用旋轉矩陣手動計算正確的座標？

其他JS庫或建議將非常受歡迎，即使它們意味着失去了IE支持。

來源

2010-07-05 Tiago

正如在那篇文章中還指出的那樣，轉換順序很重要。

翻譯對象，以便中心點（或任何其他點要繞）是在0,0
旋轉
翻譯回原來的位置

還要注意，是rotate的重載，已經這樣做了。

<html> 
    <head> 
     <script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true"></script> 
     <script type="text/javascript"> 
      function Draw() 
      { 
       var x = 150, y = 150; 
       var rotation = 0; 
       var paper = Raphael(0, 0, 800, 800); 
       var e = paper.ellipse(x, y, 30, 10); 
       paper.path("M150 150L800 150"); 
       window.setInterval(function() 
       { 
        x += 10; 
        rotation += 10; 
        e.translate(10, 0); 
        e.rotate(rotation, x, y); 
       }, 500); 
      } 
     </script> 
    </head> 
    <body onload="Draw()"> 
    </body> 
</html>

來源

2010-07-05 19:02:52

嗨！是的，這正是我正在做的。之後的問題是，當我嘗試拖動並且圖像在其自己的x座標上移動時，而不是默認的水平x座標。 – Tiago 2010-07-05 19:05:25

再次嗨！感謝您花時間處理這段代碼。我在這裏試過了，如果你用10個像素而不是1個像素進行平移，你可以看到我的問題發生了：圖像不符合直線水平線。 – Tiago 2010-07-05 19:29:05

我增加了一條直線，增加了移動距離和旋轉角度。它仍然是一條直線。您是否正在使用舊版本的Raphael？我正在使用新的副本。 – 2010-07-05 19:54:05

拖放使用拉斐爾js

回答

相關問題