アイコンWeb制作実験

HTML/CSS/jQuery/Fabric.js を試した様子と結果です.

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

イメージ

公開:

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で描いています。

Fabric.jsを使ったcanvasのイメージ