前提
fabric.js Version 2.3.2
目的
HTML5のcanvas上に、任意の長さの波線などの装飾のある線を描画していく方法の検討。
戦法
canvasを扱うライブラリはFabric.jsを使います。
このライブラリには線を描画する機能は備わっていますが、
波線などは描画できないようです。
今回は波線の画像を連続させて波線を描画する作戦でいきました。
やってみた
こんかいはこういうモクモク線？でやってみました。
See the Pen もくもく線描画 by momosetkn (@momosetkn) on CodePen.
解説
fabric.Imageをleft属性(要は左からの横方向の位置)を用意した画像の幅分足していきながら、並べていきます。
並べる画像のうち右端の画像は画像を部分的にしか使わないためwidth属性で部分的に削るようにします。
そして、最後にfabric.Group#initializeでグループ化します。
※グループ化しないと並べた画像のそれぞれが選択するさいにバラバラに選択されてしまいます
最後に
コードもっと綺麗にできた気がするけど…まあいっか。