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

残念ながら、2 番目の回転コマンドは、最初のコマンドで達成された平行移動と回転を無効にします。

ストレート SVG を実行している場合、次のようなことができます。

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

gしかし、Raphaël が svg要素をサポートしているとは思えません。

理想的には、操作をアニメーション化したいと考えていますが、今のところ、一度に 1 つずつ実行します。

4

1 に答える 1

3

これは古い質問ですが、私は自分の道を切り開いたので、答えを共有したいと思いました.

したがって、Raphael 呼び出し内であっても、SVG オブジェクトに直接アクセスできます。

this.node.getAttribute('x')

また

this.node.getAttribute('transform')

2 つ目は、必要なものを取得するものです。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 変換で回転する呼び出しは 1 つだけになります。ただし、属性に直接アクセスすることで、独自の変換を追加できます。変換は逆の順序で実行されるように見えるので (または何か -- 正直なところあまり考えたことはありません)、追加の回転を最初に実行する場合は最後に配置します。

<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 に答える