Web制作実験Fabric.jsでcanvasに座標指定して複雑な連続線を描く
公開：
HTML5のcanvasでJavaScriptライブラリのFabric.jsを使用し、座標を指定して複雑な連続線を書く方法です。
カーブも可能で、制御点の座標を変えると曲がる度合いが変わります。描かれた連続線は1つの図形となり、移動／拡縮／回転ができます。
1 2 3 4 5 6 7 8 | canvas.add(new fabric.Path(' M 40 80 L 100 80 260 60 C 200 180 140 180 100 100 L 40 100 z ', {stroke: 'royalblue', fill: '', strokeWidth: 2})); |
path()メソッドを使い、x,y座標を順に指定します。英文字の意味は下記の通りです。
- M＝Move
- 描かずにペンを動かすだけ。
- L＝Line
- 前回の点から線を引く。
- C＝Cubic bezier
- 制御点を経て曲線を引く。
- Z
- 始点と結ぶ。
上図ではCについて参考までに、(200, 180) (140, 180) (100, 100) に赤い点を打っています。この制御点の座標を変えると曲がる度合いが変わります。
コード例はわかりやすくするためにその都度改行していますが、実際は1行で連なっていてもいいです。
1 | M 40 80 L 100 80 260 60 C 200 180 140 180 100 100 L 40 100 z |
最後の z を省略すると最後の点でそのまま終了し、閉じずに描かれます。
こちらの画像下部の建物のアウトラインをこのpathで描いています。
