拖放使用拉斐尔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

回答

相关问题