세트로 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/

UPDATE : 당신은 당신의 설정을 유지하려는 경우 당신이 그것을 가지고 당신도 할 수 있도록 추가하고 앞에 추가 변환 할 수있는 추가 분석 후

:

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/