拉斐尔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

使用绝对变换而不是翻译。假设您要移动100 x和50 in y：

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

确保使用大写字母T，您将获得绝对翻译。以下是文档中所说的内容：

  

还有另外的“绝对”平移，旋转和缩放：T，R和S.它们不会考虑先前的转换。例如，... T100,0将始终在水平上移动元素100 px，而如果之前有r90，则... t100,0可以垂直移动它。只需比较r90t100,0和r90T100,0的结果。   See documentation

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

  

按给定金额将翻译添加到元素的转换列表中。   See documentation

那么会发生什么呢？它根据已经应用于对象的内容附加相对转换（它基本上是“... t100,50”）。

Answer 2

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