Raphaeljs带套的转换(Raphaeljs transformations with sets

2019-09-24 03:04发布

我有这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/



文章来源: Raphaeljs transformations with sets