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

Question

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

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

set.transform("tp1,p2")

形状重新调整为正常大小。对于以原始大小的不同比例缩放的每个形状，我无法为 set.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's 变为“t127,180s0.4”。