0

我有一个 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>

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

理想情况下，我想对操作进行动画处理，但我现在一步一步来。

4

1 回答 1

3

这是一个古老的问题，但我只是努力解决了它，所以我想我会分享我的答案。

您可以直接访问 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>
于 2011-06-01T03:27:35.063 回答