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

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

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

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/

Raphaeljs与集合的转换

1 个答案: