3

Raphael (SVG を操作するための JavaScript ライブラリ) では、回転、平行移動、スケーリングなどの変換を要素に適用できます。

では、幅 8 ピクセルの線を作成したいとしましょう。私はこのようなことができます：

paper = new Raphael(0, 0, 200, 200);
paper.path("M 0,0 l 200,200").attr({"stroke-width": "8px"});

しかし、どうにかしてその線を拡大縮小したい場合は、8 ピクセルの幅を失い、標準の 1 ピクセルの幅に戻ります。

paper.path("M 0,0 l 200,200").attr({"stroke-width": "8px"}).transform("s -1,1");

何をしても、ストローク幅を維持するスケーリングされた線を作成できないようです。他の変換は正常に機能します。この問題があるのはスケーリングだけのようです。また、Firefox と Chrome の両方で同じ問題が発生します。

jsFiddle での私の問題の例を次に示します。ご覧のとおり、回転と平行移動は正常に機能しますが、スケーリングは機能しません。

何がうまくいかないのですか？

4

1 に答える 1

2

何らかの形で変換を適用すると、ストローク幅が NaN に変更されます。おそらくそれはバグです。ただし、マトリックス変換を使用して変換を適用できます。

于 2012-07-22T07:02:22.087 に答える