1

私は raphael.js を使用して (手の) ベクターをテストしていますが、「M」パラメーターがパスの描画を開始する場所を示しているという印象を受けましたが、私の例では: http://jsfiddle.net/7QA43/ 1/ M のパラメーターを (361,243 から 100,100 に) 変更したとき、小指の一部が元の位置に「固定」されているようです。

これを引き起こしている可能性のあるものがないか、svg パス データをスキャンしましたが、見つかりません。

パスの一部が外れている可能性がありますか？

4

1 に答える 1

2

SVG パスには、すべてのパス コマンドに絶対と相対の 2 つの種類があります。

  • 絶対パス コマンドは大文字で表記され、前のポイントに関係なく指定された座標を示します。
  • 相対パス コマンドは小文字で示され、前のパス コマンドの場所を基準にして指定された座標を示します。

最後の CurveTo コマンドを除いて、すべてのパス コマンドは相対パスです。
"...44-1.436,3.662-2.155C357.073,245.799,359.609,244.566,361.839,243.057z"

仕様から：

(x1,y1) を曲線の始点の制御点として使用し、(x2,y2) を曲線の終点の制御点として使用して、現在の点から (x,y) までの 3 次ベジエ曲線を描画します。C (大文字) は、絶対座標が続くことを示します。c (小文字) は、相対座標が続くことを示します。複数の座標セットを指定して、ポリベジエを描画できます。コマンドの最後で、新しい現在の点が、ポリベジエで使用される最終的な (x,y) 座標ペアになります。

最も簡単な修正は、パスからこのコマンドを削除するだけで、明らかな違いはほとんどありません。

削除により修正: http://jsfiddle.net/7QA43/2/

または、最初の MoveTo コマンドを使用してパスの場所を調整しないでください。パスをそのままにtransform()して、新しい場所に移動します。

path_a.transform('t-200,-154');

Transform で修正: http://jsfiddle.net/7QA43/5/

問題のある CurveTo の前にあるコマンドの最後の座標を見つけて問題を修正し、相対値を使用するようにパラメーターを変更することは、読者の課題として残されています。

于 2012-06-05T21:01:39.780 に答える