4

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

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

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

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

替代文字
（来源：oreilly.com）

正如SVG Essentials中所解释的，这是预期的行为。

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

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

4

1 回答 1

3

正如那篇文章中所指出的，转换的顺序很重要。

  1. 平移对象，使中心点（或您想要旋转的任何其他点）位于 0,0
  2. 旋转
  3. 翻译回上一个位置

另请注意，已经执行此操作的旋转过载。

<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-05T19:02:52.247 回答