Raphael 텍스트 객체에 여러 회전 변환을 적용하려면 어떻게해야합니까?

Question

나는 멀리 떨어져있는 축을 중심으로 회전하고 텍스트가 수평으로 유지되도록 회전하는 Raphaël 텍스트 개체를 가지고 있습니다. 나는 이것이 SVG 변환 행렬을 사용하여 가능하다는 것을 알고 있지만, 저자는 Raphaël has stated that they won't be a part of the toolkit anytime soon이다. 여기에 내가하고 싶은 것을 몇 가지 코드는 다음과 같습니다

txt_obj = paper.text(100, 100, "Hello!"); 
txt_obj.rotate(90, 100, 200); // rotate text so it is sideways at (200,200) 
txt_obj.rotate(-90); // rotate text back to horizontal 

불행하게도, 두 번째 회전 명령은 처음에 의해 수행 번역 및 회전을 말살. 내가 바로 SVG를하고 있던 경우

나는 이런 식으로 뭔가를 할 수 :

<g transform="rotate(90, 100, 200)"> 
    <text x="100" y="100" transform="rotate(-90, 100, 100)">Hello!</text> 
</g> 

그러나, 나는 라파엘은 SVG g 요소를 지원하는지 믿지 않는다.

이상적으로 나는 애니메이션 작업을하고 싶습니다만, 지금 당장은 한 걸음 씩 나아갈 것입니다.

Answer 1

이것은 오래된 질문이지만 방금 내 길을 걸어서 싸워서 대답을 나누겠다고 생각했습니다.

당신은 thusly 히, 당신의 라파엘 호출도 내부에 직접 SVG 개체에 액세스 할 수 있습니다

this.node.getAttribute('x') 

또는

this.node.getAttribute('transform') 

두 번째는 우리가 필요한 우리를 얻을 것입니다. 그래서 마지막으로 SVG 변환을 회전하는 단 하나의 호출이있다() 이전 설정을 덮어

<text x="600" y="606.240234375" text-anchor="middle" style="text-anchor: middle; 
font: normal normal normal 10px/normal Arial; font-family: Arial; font-weight: 900; 
font-size: 18px; " font="10px &quot;Arial&quot;" stroke="none" fill="#000000" 
font-family="Arial" font-weight="900" font-size="18px" transform="rotate(45 600 600)"> 
<tspan style="-webkit-user-select: none; cursor: pointer; ">FOOBAR</tspan></text> 

여러 통화 .rotate하기 : 라파엘과 텍스트를 회전의 문제점은이 (가) SVG로 변환 설정하지 전부입니다. 그러나 속성에 직접 액세스하여 자체 변형을 추가 할 수 있습니다.

<script> 
(function (raphael) { 
    $(function() { 
    var paper = raphael("raphael_div", 500, 500); 

    upside_down_text = paper.text(100,100,'UPSIDE DOWN') 
          .attr('font-family','Arial') 
          .attr('font-size','24px');       
    upside_down_text.rotate(25,250,250); // rotate using Raphael 
    // But first we want to rotate 180 degrees. 
    height = upside_down_text.getBBox().height; 
    upside_down_text.node.setAttribute('transform', 
             upside_down_text.node.getAttribute('transform')+ 
             ' rotate(180 '+ 
             upside_down_text.node.getAttribute('x')+ 
             ' '+ 
             (upside_down_text.node.getAttribute('y')-(height/2))+ 
             ')'); 
    }); 
})(Raphael.ninja()); 
</script> 
<div id="raphael_div"></div>