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>

但是，我不相信Raphaël支持svg g元素。

理想情况下，我想为这个操作设置动画，但我现在一步一个步骤。

Answer 1

这是一个古老的问题，但我只是为此奋斗，所以我想我会分享我的答案。

您可以直接访问SVG对象，甚至可以在您的Raphael调用中访问：

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>

如何在Raphael文本对象上应用多个旋转变换？

1 个答案: