集的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/