2014年2月28日金曜日

パスデータからノードの座標を取得

集中線エクステンションの第一歩として、ノード座標を取得する処理を作った時の覚書

svg

d = 'M -37.523,207.95 C 7.6753,107.32 64.813,167.87 72.488,200.28 c 7.676,32.41 69.082,34.96 87.842,-5.12'

試しに上のようなパスデータを用意して、二種類のパスデータ解析を比較します。

simplepath.parsePath()

simplepath.parsePath(d)

simplepath.parsePath()を通すと、絶対座標コマンド+絶対座標に変換、リストにしてくれます。

[['M', [-37.523, 207.95]], ['C', [7.6753, 107.32, 64.813, 167.87, 72.488, 200.28]], ['C', [80.164, 232.69, 141.57, 235.24, 160.32999999999998, 195.16]]]

座標の取得は出来ますが、コマンドによる条件分岐など少し手間が掛かりそうです。
これを使う場合は、下二桁の座標を拾っていく事になると思います。

ちなみにCコマンド以下の座標は、[前の点から次の点へのハンドル座標、次の点から前の点へのハンドル座標、次の点の座標]となっています。
参考:三次ベジェ曲線命令

座標の数値が一つだけ変になっていますが、特に気にしません。

cubicsuperpath.parsePath()

cubicsuperpath.parsePath(d)

cubicsuperpath.parsePath()を通すと、[ハンドル,ノード,ハンドル]リストを作成してくれます。

[[[[-37.523, 207.95], [-37.523, 207.95], [7.6753, 107.32]], [[64.813, 167.87], [72.488, 200.28], [80.164, 232.69]], [[141.57, 235.24], [160.32999999999998, 195.16], [160.32999999999998, 195.16]]]]

すっきりしていい感じです。
座標だけが欲しいのでこれを利用します。

サンプル

取得した座標にマークをつけてみました。
希望通りの処理が出来たので一歩前進です。

重複座標が存在する場合もあるので、何か処理を噛ませた方が良いかもしれません。