RaphaelJS에서 변환 상태를 저장하고 복원하는 방법

Question

일부 데이터 시각화를 위해 벡터 드로잉이 필요한 프로젝트에 RaphaelJS을 사용하고 있습니다.

변환 상태를 푸시하고 팝하는 방법을 알 수 없습니다. (context.save() 및 HTML5 캔버스 context.restore()과 동일)

는

은 누군가가 올바른 방향으로 날 포인트?

감사합니다.

Answer 1

변환 상태를 푸시하고 팝해야하는 이유를 설명해 주시겠습니까?

svg에서 실제로 그렇게 할 필요는 없습니다. 브라우저가 대신 해줍니다. 특정 변형을 요소에 적용하려면 transform attribute을 요소에 추가하면됩니다. <g> 요소 (Raphaël에는 <g> 요소처럼 사용할 수있는 Paper.set이 있고 변형을 설정하는 방법은 Element.transform)을 사용하여 많은 요소에 변형을 적용 할 수 있습니다.

업데이트 :

context.save() -이 (주어진 시간에 요소의 현재 변환 행렬 (CTM)를 타고 라파엘 나는이 Element.transform()이 될 수 있습니다 추측 어딘가에 저장하는 것입니다 SVG의 측면에서 CTM이 모든 요소에서 사용할 수있는 getCTM() 메서드를 통해 가져올 수있는 순수한 svg에서 변환의 전체 스택을 포함하거나 포함하지 않으면 100 % 확신 할 수 없습니다. 이 작업을 수행하는 한 가지 방법은 <g> 요소를 원하는 변환과 함께 삽입하는 것입니다.

context.restore() - 이것은 변환 목록에서 변환을 제거하는 것과 같습니다. 그러나 svg 형제에서는 변환을 "상속하지"않습니다 (현재 설정된 행렬이 html5 캔버스 또는 OpenGL과 다르다는 점에 유의하십시오). 변형을 설정 한 후 그릴 무언가에 적용). 변형을 여러 요소에 적용하려면 <g>을 만들고이 요소는 해당 요소의 모든 자식에 적용해야하는 변환을 가지고 대신 <g> 부모에 요소를 삽입하면됩니다. Raphaël은 <g> 요소에 대한 기본 지원을 제공하지 않습니다 (비슷한 개념 인 Element.set을 계산하지 않는 한). Raphaël이이 작업을 수행하는 이유는 사람들이 다음과 같은 일을 시도하지 못하도록하는 것입니다. 그것을 깨닫지 않고 DOM을 부 풀리기가 매우 쉽습니다 (SVG는 캔버스와 OpenGL과 달리 retained mode 그래픽 형식입니다).