Question

我正在尝试用javascript构建一个益智游戏，使用raphael来处理碎片的拖放和旋转。

我面临的问题是：每当我旋转图像时，它的坐标系也会旋转，并且拖放功能不再像预期的那样工作。

Edit2：这是一个简单的测试用例。拖动椭圆，旋转它，然后再次尝试拖动： http://www.tiagoserafim.com/tests/dragdrop.html

编辑：为了澄清，每当我用鼠标向右移动1个像素（x ++）时，图像也会在x-coord上移动1个像素，但在其自己的坐标系上，可能会旋转，如下图所示示出。

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

如SVG Essentials所述，这是预期的行为。

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

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

Answer 1

正如该文章所述，转换的顺序很重要。

翻译对象，使中心点（或者您要旋转的其他任何点）为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>

使用Raphael js拖放

1 个答案: