Snap.svg - 끌기 후 회전하지 않음

Question

기본 질문이며 쉽게 답변 할 수 있기를 바랍니다. 기본적으로, 도형을 드래그하여 두 번 클릭하고 90도 회전하려고합니다. 그러나 일단 시작점에서 모양을 옮기면 회전이 엉망이됩니다. 나는 ...과 같이 회전 중심점을 계산하는 것을 시도했다

var bbox = tri.getBBox(); 
tri.animate({ 
    transform: "R"+angle+"," + bbox.cx + "," + bbox.cy 
}, 500) 

은 ... http://jsfiddle.net/henryJack/hsfor158/7/을 바이올린을 참조하십시오.

많은 도움을 주셨습니다.

Answer 1

잠재적으로 두 가지 문제가 있다고 생각합니다.

첫째, 변환은 기존 변환을 덮어 씁니다. 따라서 기존 변환을 포함시킨 다음 새 변환을 포함 시키려고합니다.

element.transform() 

기존 변환을 제공합니다. 그래서 당신은 오래된 것과 새로운 것을 결합 할 수 있습니다.

tri.animate({ 
    transform: tri.transform() + "R"+angle+"," + bbox.cx + "," + bbox.cy 
}, 500) 

그러나, 내가 생각하는 두번째 문제는 getBBox()가 기본적으로 계정 변환을 고려하지 않고, 당신이 두 번 클릭하고 사용 어딘가에 변환 저장할 수 있도록이 변환을 축적한다는 것입니다 transform() 대신에 그것.

GetBBox (1)를 주면 스냅 숏 getBBox()에 숨겨진 매개 변수가 있습니다. 로컬 변환이 고려 될 것입니다 (이 경우 잘못되었을 수 있으므로 확실히 알고 싶다면, 소스 코드가 매개 변수 isWithoutTransform을 호출하지만,이 코드를 해석하는 방법에 따라 플레이가 달라집니다.)이 특정 주제에 대한 새로운 질문을합니다.

그래서 당신은 가능한 두 ...

var bbox = tri.getBBox(1); 
angle += 90; 
tri.animate({ 
    transform: tri.transform() + "r"+angle+"," + bbox.cx + "," + bbox.cy 
}, 500); 

jsfiddle

더 나은 솔루션을 결합 할 수 있습니다,하지만 더 나은 방법이있을 수 있습니다 : 당신이 적용 계정 추가 변환을 고려해야하는 경우 바깥 쪽 요소 (예 : 변형 된 그룹에있는 경우)가 더 복잡해지면 getTransformedBBox와 같은 함수를 추가하거나 다른 솔루션 (예 : )을 드래그하여 외부 그룹을 드래그해야합니다. i를 회전 시켜라. nner 요소. 대체 솔루션으로이 작업을 수행 할 수 있습니다 (그룹에 요소 추가, 그룹 끌어 오기 추가, 요소 회전)! 별도의 그룹

var triGroup = s.group(tri) 
var angle = 0; 
var rotate = function() { 
    var bbox = tri.getBBox(); 
    angle += 90; 
    bbox = tri.getBBox(); 
    tri.animate({ 
     transform: "r"+angle+"," + bbox.cx + "," + bbox.cy 
    }, 500); 
} 

triGroup.dblclick(rotate); 
triGroup.drag(); 

jsfiddle 2