Как применить несколько преобразований вращения к текстовому объекту Raphael? - PullRequest
Новая
       309

Как применить несколько преобразований вращения к текстовому объекту Raphael?

0 голосов
/ 18 июня 2010

У меня есть текстовый объект Raphaël, который я хотел бы вращать вокруг оси на некотором расстоянии, а также соответственно поворачивать текст, чтобы он оставался горизонтальным. Я знаю, что это возможно при использовании матриц преобразования SVG, но автор Raphaël заявил, что в ближайшее время они не будут частью инструментария . Вот код того, что я хотел бы сделать: 

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.

В идеале я бы хотел оживить операцию, но сейчас я сделаю ее по шагам за раз.

1 Ответ

3 голосов
/ 01 июня 2011

Это старый вопрос, но я только что пробился, поэтому решил поделиться своим ответом.

Вы можете получить доступ к объекту SVG напрямую, даже внутри вызовов Рафаэля, таким образом: 

this.node.getAttribute('x')

или 

this.node.getAttribute('transform')

Второй - это то, что дает нам то, что нам нужно.Проблема с вращением текста с помощью Raphael состоит в том, что все, что он делает, это устанавливает преобразование в 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>
...