拉斐尔 2 旋转和平移

Question

这是我的脚本：

<script>
Raphael.fn.polyline = function(pointString) {
    return this.path("M" + pointString);
};

window.onload = function() {

var paper = Raphael("holder", 500, 500);
paper.circle(100, 175, 70).attr({"stroke-width":10, "stroke":"red"});

var a = paper.polyline("92,102 96,91 104,91 108,102").attr({"fill":"green", "stroke-opacity":"0"}).rotate(25, 100, 175);
var b = paper.polyline("92,102 96,91 104,91 108,102").attr({"fill":"green", "stroke-opacity":"0"}).rotate(45, 100, 175);
var c = paper.polyline("92,102 96,91 104,91 108,102").attr({"fill":"green", "stroke-opacity":"0"}).rotate(65, 100, 175);

var group = paper.set();
group.push(a, b, c);

group.translate(60);

};
</script>

当我使用 raphael-1.5.2 时，结果是：

当我使用 raphael 2.0 时，结果是：

在 1.5.2 中，它使用旋转变换来围绕圆旋转对象，在 2.0 中，它使用矩阵变换。我假设矩阵变换会变换该对象的坐标系，因此当您稍后在 xy 方向上平移该对象时，它会在相对于该对象的 xy 方向上平移它。

我需要能够在红色圆圈的边缘添加绿色对象，然后能够向同一方向拖动和移动所有内容。我是一直在使用 1.5.2 还是我只是错过了 2.0 中翻译的变化？

Answer 1

使用绝对变换而不是平移。假设您想在 x 中移动 100，在 y 中移动 50，请执行以下操作：

Element.transform("...T100,50");

确保使用大写 T，您将获得绝对翻译。以下是文档对此的说明：

还有替代的“绝对”平移、旋转和缩放：T、R 和 S。它们不会考虑之前的变换。例如，...T100,0 将始终水平移动元素 100 px，而 ...t100,0 如果之前有 r90，则可以垂直移动元素。只需比较 r90t100,0 和 r90T100,0 的结果即可。
查看文档

关于翻译，根据 Raphael JS 2.0 中的文档翻译是这样做的：

将给定数量的翻译添加到元素的转换列表中。
查看文档

因此，它会根据已应用于对象的内容附加相对转换（它基本上是“...t100,50”）。

Answer 2

我怀疑使用 1 时，你的变换正确地将集合视为一个对象，但使用 2 时，绿色的小东西会独立旋转
二是彻底重新设计，这样的脱节很少会发生
使用 getBBox 并找到集合的中心，然后在整个集合上使用 1 个旋转命令，指定从 getBBox 派生的 cx cy