3

私は SVG と Raphael についてはまったくの初心者ですが、Illustrator を長年使用してきたので、その動作についていくつかの仮定があります。単一の要素を返す必要がある 2 つのパスを結合したいと考えています。

吹き出しを作る必要がありますが、実際には何でもかまいません。rectこの場合、角が丸いものと、rect回転した正方形のものの2 つを作成しようとしました。問題ないように見えましたが、吹き出しを動かそうとすると、45 度回転しているため、回転した要素が間違った方向に移動しました。

後で単一の要素/パスであるかのように操作できるパスを結合するにはどうすればよいですか?

ふきだしの例

4

3 に答える 3

2

ほら、デモ

var paper = Raphael('canvas',400,400),
    r1    = paper.rect(100,100,200,100).attr({fill:'black'}),
    r2    = paper.rect(130,130,140,40,5).attr({fill:'white','stroke':'white'}),
    r3    = paper.path("M200 170L240 170 220 180z").attr({fill:'white', 'stroke':'white'}), 
    p     = paper.set(r1,r2,r3);

// the rest of the code is in the demo

三角形のビアを作成する方が簡単で、path()回転を気にしないことに注意してください。幸運を ;）

于 2013-08-27T16:24:31.247 に答える
1

最初に、2 つの要素を Raphael セットにプッシュして、後で移動することができますElement.transform()。これにより、移動ハンドラーを 2 回ではなく 1 回適用できます。

また、あなたの問題については、実際に文書化されています：

... 代替の「絶対」変換、回転、およびスケールもあります: T、R、および S。それらは、以前の変換を考慮しません。たとえば、 ...T100,0 は常に要素を水平方向に 100 ピクセル移動しますが、前に r90 がある場合、 ...t100,0 は要素を垂直方向に移動できます。r90t100,0 と r90T100,0 の結果を比較するだけです。...

于 2013-08-27T09:53:11.223 に答える