使用 Raphael 保持集合中多个项目的缩放

Question

我有一组形状，每个形状都以不同的比例缩放。

当集合转换到另一个点时使用

set.transform("tp1,p2")

形状重新调整为正常大小。对于每个缩放的形状 在它们原始尺寸的不同比例中，我无法给出比例 set.transform 的选项。

如何在 transform() 期间保持集合中每个项目的缩放比例？

我的代码问题：

http://jsfiddle.net/XHr4H/

Answer 1

Raphael 处理此问题的不完善方法是允许将转换指令附加到转换序列（使用“directive...”）或附加到转换序列（使用“...directive”）。在您的情况下，实现您想要的效果的最简单方法是在 setTimeout 函数中添加您想要的相对变换。

var paper = Raphael("paper", 200, 200);

var s = paper.set(),
    r = paper.rect(0,0,30,30).attr({"fill":"green"}).transform("t27,30s0.2"),
    r2  = paper.rect(40,0,30,30).attr({"fill":"red"}).transform("t27,30s0.4");
s.push(r,r2);
setTimeout(function(){
    s.transform("t100,150...");  // here 'tis
}, 2000);

transform("t100,150...") 本质上将所需的转换插入到集合中每个元素的转换字符串的开头。因此，r 的转换累积计算为“t127,180s0.2”，r2 变为“t127,180s0.4”。