Javascript 如何使用Raphael js库拖动旋转的形状

我已经做了很多关于拖动Raphael库创建的对象的示例。现在我正在处理集合，并且能够编写代码来拖动它们

现在，当我旋转一个对象然后拖动它时，问题出现了

查看以下代码示例：

---

通过查看演示，您可以看到该集合是使用旋转矩形创建的，但只要拖动它，它就会返回到0度状态。为什么？有什么解决办法吗

问题在于，每当通过应用包含移动、旋转、缩放等指令的字符串对元素进行变换时，它都会重置变换对象，因此以前的变换会丢失。要避免这种情况，请添加。。。在转换字符串的开头。像

var el = paper.rect(10, 20, 300, 200);
// translate 100, 100, rotate 45°, translate -100, 0
el.transform("t100,100r45t-100,0");
// NOW, to move the element further by 50 px in both directions
el.transform("...t50,50");

如果使用t50,50而不是…t50,50，则T100100R45T-100,0的转换效果将丢失，并且t50,50规则的转换效果将丢失

拉斐尔进一步研究参考：

---

希望这能有所帮助。

问题在于，只要通过应用包含移动、旋转、缩放等指令的字符串来变换元素，它就会重置变换对象，因此以前的变换就会丢失。要避免这种情况，请添加。。。在转换字符串的开头。像

var el = paper.rect(10, 20, 300, 200);
// translate 100, 100, rotate 45°, translate -100, 0
el.transform("t100,100r45t-100,0");
// NOW, to move the element further by 50 px in both directions
el.transform("...t50,50");

如果使用t50,50而不是…t50,50，则T100100R45T-100,0的转换效果将丢失，并且t50,50规则的转换效果将丢失

拉斐尔进一步研究参考：

---

希望这能有所帮助。

我找到了解决这个问题的简单方法。因为我需要一个菱形而不是矩形，所以我创建了一个表示该菱形的路径。然后这条路径就变成了一个旋转45度的正方形。

---

事实证明，这很容易，因为我为程序提供的拖动功能与路径完美配合。

我找到了解决此问题的简单方法。因为我需要一个菱形而不是矩形，所以我创建了一个表示该菱形的路径。然后这条路径就变成了一个旋转45度的正方形。

---

事实证明，这很容易，因为我为程序提供的拖动功能与路径完美配合。

可能不是OP使用的解决方案，但这解释了原因。可能不是OP使用的解决方案，但这解释了原因。