nw.jsでデスクトップアプリを作る(13) - SVG pathをgeometryに変換する(3)

公開:2015-02-26 04:40
更新:2017-11-15 21:58
カテゴリ:nw.js,d3.js,three.js,javascript,webgl,html5,nw.jsでデスクトップアプリを作る

おととい作ったものは細部がつぶれすぎている気がするので再度トレースし直し、手動でバウンディング・ボックスを入れてみた。これを基準にセルを切り出していくことにする。切り出しはd3.jsでなんとかできそうだ。

image/svg+xml

あとInkscapeではlayer = gであるので、セルごとにg要素に格納しておけば何かと便利かと思い、レイヤーをセル分だけ作って馬のpathとバウンディング・ボックスを格納している。

バウンディング・ボックスの左端座標を(0,0)として馬のpathのdプロパティに入っているmコマンドの座標を補正すれば(mコマンドの座標 - バウンディング・ボックスの左端座標)うまくいくと思っているがどうか。これがうまくできたらsvgで描画したものをアニメーションしてみようと思っている。そのあとThree.jsのgeometryに変換してみるつもりだ。