javascript - 如何在 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>

但是，我不相信 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>