拉斐尔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的结果. 见文档

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

将给定数量的转换添加到元素的转换列表中. 见文档

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