2

この svg パス (アイコン) を文字列として持っているとしましょう:

"M16,1.466C7.973,1.466,1.466,7.973,1.466,16c0,8.027,6.507,14.534,14.534,14.534c8.027,0,14.534-6.507,14.534-14.534C30.534,7.973,24.027,1.466,16,1.466zM16,28.792c-1.549,0-2.806-1.256-2.806-2.806s1.256-2.806,2.806-2.806c1.55,0,2.806,1.256,2.806,2.806S17.55,28.792,16,28.792zM16,21.087l-7.858-6.562h3.469V5.747h8.779v8.778h3.468L16,21.087z"

次のように (たとえばraphael.jsを使用して)スケールアップできます。

icon = paper.path("M16,1.466C7.973,...").attr({fill: "#000", stroke: "none"});
icon.transform("s4T50,50");

この最後の行は、画像を x4 にスケーリングし、全体を右下に移動します。

ここまでは順調ですが、svg ファイルで使用するには結果のパスが必要です。

だから私の質問:変換が行われた後、結果または計算されたパスを取得するにはどうすればよいですか?

4

3 に答える 3

2

ここで私の答えとここでテストベッドを確認してください。

変換をパスにベイク (または適用) できる関数 flatten_transformations() があります。すべてのパス セグメント (アークも) を処理できます。すべてのパス セグメントを M:s および C:s に変換するか、そのままにするかを選択できます。H と V だけは残すことができず、L:s に変換する必要があります。これは、変換によって垂直線と水平線が非垂直線と非水平線になる可能性があるためです。座標を相対座標に変換するか絶対座標に変換するか、および変換の精度を選択することもできます。

このような平坦化機能が Raphaël の一部であるとよいでしょう。

于 2012-11-03T15:58:58.073 に答える
1

パスはまったく同じままなので、ここで目的のものを取得することはできません。

Raphael がポイントを循環し、変換時に座標を拡大すると想定しています。ただし、それは行われません。代わりに、変換関数がレンダラーに適用されます。

たとえば、.transform("s4T50,50");結果のパスがDOMで次のようになった後：

<path 
    style="" 
    fill="#000000" 
    stroke="none" 
    d="M16,1.466...39V14.525H23.858L16,21.087Z" 
    transform="matrix(4,0,0,4,2,2)" 
    stroke-width="0.25"
/>

さて、これが VML でどのように機能するかを想像するだけでもぞっとしますが、c'est la vie です。とにかく、取得できるのは別の境界ボックスicon.getBBox()です。その部分は、画面ピクセル座標系に当てはまります。初歩的な情報ですが、次のことに役立ちます。

        before transform       after icon.transform()

height  29.067999999999998     116.27199999999999
width   29.067999999999998     116.27199999999999
x        1.466                   7.864000000000014
x2      30.534                 124.13600000000001
y        1.466                   7.864000000000014
y2      30.534                 124.13600000000001
于 2012-07-17T18:02:14.603 に答える
1

関数Raphael.transformPathは、探しているもののようです。

icon = paper.path(Raphael.transformPath("M16,1.466C7.973,...", "s4T50,50")).attr({fill: "#000", stroke: "none"});
于 2012-07-18T14:15:31.430 に答える