もう二ヶ月も前になりますが、2月のSparkProject勉強会#7 で発表させていただいたときのスライドをアップしておきます。上げようと思いながら二ヶ月…。堕落してますね…。
発表内容はSVGのことでした。SVGのこと、というより Frocessing 内にあるSVGのパーサー的なことです。発表のとき「SVG使ったことある方いますか？」と聞いてみたところ40人ぐらいの内で1人だったような。やはりマイナーなんですかね。スライドは以下のPDFです。
//nutsu.com/spark/spark7_svg_090223.pdf
スライド内に書いている frocessing.shape.FShapeSVG が SVG をパースするクラスですが、パースする要素はパスや色関連だけです。簡易的なパーサーなんですね。イラレデータを持ってくる目的でつくったりしてます。パスや色だけあればパースは複雑でないので、あるいは興味のある方があれば参考にしていだけるとうれしいです。preserveAspectRatio など恣意的に解釈を変えているところもあります。シェイプの矩形情報など、とりあえず的で泥臭い部分もありますが、その辺りはスルーで。
FShapeSVG には要素個別のパースもあるので asdoc も合わせてご覧ください。
イラレでデータをつくった場合、<path> 要素になることが多いのですが、この要素は FShape のインスタンスになります。FShape には FP10 の GraphicsPath に似た commands, vertices という配列があって、それぞれ描画指示と座標が格納されます。commands の中には描画指示をあわらす int が入ってきますが、何番が何というのは asdoc には書いていません…。ので以下に書いておきます。パスデータだけ使いたい場合は参考にしてください。
- 1 : MOVE_TO : 座標 x,y
- 2 : LINE_TO : 座標 x,y
- 3 : CURVE_TO : 座標 cx,cy,x,y
- 10 : BEZIER_TO : 座標 cx1,cy1,cx2,cy2,x,y
- 100: CLOSE_PATH : 座標 なし
ちなみに frocessing ではパースして生成したクラスを Graphics に描画するメソッドを提供していますが、シェイプをそのまま表示するなら Sprite に変換してやったほうが速いです。
PDFの最後は「デモ…」となっていますが、当日プチライブコーディング的なサンプルをつくったりしました。ちょっとやってみたかったというか…。で、やはりエラーにはまる始末。後日そのスクリプトを読んでみると index 指定を 0 のところを 1 と書いてあるんですね。凡中凡です。ライブコーディングをサクサクやる人とか、エラー出ても根気よく摘んでいく人とか、尊敬です。