使用Raphael js进行拖放操作

Question

使用Raphael js进行拖放操作

4

我正在尝试使用JavaScript和Raphael构建拼图游戏，以处理拼图块的拖放和旋转。然而，我面临的问题是：每当我旋转一张图片时，它的坐标系也会随之旋转，导致拖放操作不再按照预期工作。为了说明，无论我用鼠标向右移动1像素（x++），该图片在自身的坐标系上也会朝x轴正方向移动1像素，如下图所示。这里有一个简单的测试用例，您可以在其中拖动椭圆并进行旋转，然后再次尝试拖动： http://www.tiagoserafim.com/tests/dragdrop.html

_{(来源: oreilly.com)}

如SVG Essentials所解释的那样，这是预期行为。

我的问题是：有没有一种优雅的方法来实现我想要的，或者我将被迫使用旋转矩阵手动计算正确的坐标？

其他JS库或建议将非常受欢迎，即使它们意味着失去IE支持。

- Tiago

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dark Falcon · Accepted Answer

正如文章中所提到的，变换的顺序很重要。

将对象平移，使中心点（或任何其他您想要围绕旋转的点）位于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>