1

これらの 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

}
4

1 に答える 1

3

要素に対して新しい変換を行うと、以前の変換がリセットされます。目的を達成する方法はたくさんあると思います.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/

于 2012-10-15T08:21:40.737 に答える