Raphaeljs与集合的转换

Question

我有这4个矩形，每个矩形都有一定量的旋转变换。 我将所有这些矩形放在一个集合中，然后在其上应用转换。 这样做会丢失各个矩形的旋转变换。 我不希望这种情况发生。 我该如何解决这个问题？

JS小提琴代码

window.onload = function(){
    var paper = Raphael(0,0,500,500);

    var rect01 = paper.set();
    paper.setStart();      

    var a = paper.rect(10,10,50,10).transform("r10");
    var b = paper.rect(10,30,50,10).transform("r-10");
    var c = paper.rect(10,50,50,10).transform("r10");
    var d = paper.rect(10,70,50,10).transform("r-10");

    var rect01 = paper.setFinish();    
    rect01.transform("t100,100");//comment out this line to view the individual transformations

}

Answer 1

每当你对一个元素进行新的变换时，它会重置任何先前的变换，我确信有很多方法可以实现你想要的，一种方法就是在旋转的同时进行移动。

注意：在您的情况下，您必须在轮换前进行移动。

window.onload = function(){
    var paper = Raphael(0,0,500,500);    

    var a = paper.rect(10,10,50,10).transform("t100,100r10");
    var b = paper.rect(10,30,50,10).transform("t100,100r-10");
    var c = paper.rect(10,50,50,10).transform("t100,100r10");
    var d = paper.rect(10,70,50,10).transform("t100,100r-10");

}

http://jsfiddle.net/Vqn93/2/

更新：

在进一步分析之后，您可以追加并预先添加转换，因此如果您想保留您的设置，您还可以执行以下操作：

window.onload = function(){
    var paper = Raphael(0,0,500,500);

    var rect01 = paper.set();
    paper.setStart();      

    var a = paper.rect(10,10,50,10).transform("r10");
    var b = paper.rect(10,30,50,10).transform("r-10");
    var c = paper.rect(10,50,50,10).transform("r10");
    var d = paper.rect(10,70,50,10).transform("r-10");

    var rect01 = paper.setFinish();

    // prepend the translation before all the rotations
    rect01.transform("t100,100...");

}

元素转换的文档在您之前或之后使用...取决于您是否要预先添加或追加。

http://jsfiddle.net/Vqn93/3/