带集合的 Raphaeljs 变换

Question

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

JS 小提琴Code

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...");

}

docs for element transform 使用的状态 ... 之前或之后取决于您是要添加还是添加。

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