Fabric.jsでcanvasに座標指定して複雑な連続線を描く

公開：2020-02-17

HTML5のcanvasでJavaScriptライブラリのFabric.jsを使用し、座標を指定して複雑な連続線を書く方法です。

カーブも可能で、制御点の座標を変えると曲がる度合いが変わります。描かれた連続線は1つの図形となり、移動／拡縮／回転ができます。

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行で連なっていてもいいです。

M 40 80 L 100 80 260 60 C 200 180 140 180 100 100 L 40 100 z

最後の z を省略すると最後の点でそのまま終了し、閉じずに描かれます。

こちらの画像下部の建物のアウトラインをこのpathで描いています。