gpt4 book ai didi

javascript - 使用 Raphael js 拖放

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:07:31 27 4
gpt4 key购买 nike

我正在尝试用 javascript 构建一个益智游戏,使用 raphael 处理棋子的拖放和旋转。

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

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

编辑:澄清一下,每当我用鼠标向右移动 1 个像素 (x++) 时,图像也会在 x 坐标上移动 1 个像素,但在它自己的坐标系上,可能会旋转,如下图所示显示。

alt text
(来源:oreilly.com)

SVG Essentials 中所述,这是预期的行为。

我的问题是:是否有一种优雅的方式来做我想做的事情,或者我将被迫使用旋转矩阵手动计算正确的坐标?

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

最佳答案

正如那篇文章中提到的,转换的顺序很重要。

  1. 平移对象,使中心点(或您想要旋转的任何其他点)位于 0,0
  2. 旋转
  3. 翻译回之前的位置

还要注意 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>

关于javascript - 使用 Raphael js 拖放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3181624/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com