fabric.jsを使うと一発でcanvasが手書き可能になる
ブラウザ上でさくっとお絵かきができるツールを作っています。
昔、作ったことがあるのですが、ライブラリが古くなって動かなくなり、そのまま使わなくなりました。
で、なんかいいライブラリーはないかなーと思って調べたら、ありました。
fabric.jsというライブラリ、なんとjavascript一行書くだけで任意のcanvasが手書き可能になります。
ほかにもいろんな機能があるのですが、私はとりあえず手書き機能をありがたく使わせていただくことにしました。
object.isDrawingMode = true; とするだけでオッケー
さっそく使ってみました。cdn対応なので、ライブラリはダウンロードしなくても大丈夫。
たったこれだけのコードでお絵かきが実現できます。すごい！
See the Pen ZELVjNR by Ryoji Kimura (@ryjkmr) on CodePen.
CSSでborderを指定するとなぜか描画結果がズレる
とりあえず全部html内に書いたけど、やっぱりスタイル指定とか外部cssに移したくなるじゃないですか。
で、こんな風なコードにしたら、なぜか描画したあとの線が移動してズレちゃいます。
See the Pen JjEwaJj by Ryoji Kimura (@ryjkmr) on CodePen.
borderの指定を外部cssに移しただけなんですけどね。
divで囲んでそっちにborder指定をして解決
いろいろやってみて、最終的にcanvasをdivで囲って、そっちにcssでborderを適用したらうまくいきました。
See the Pen fabric.js free drawing div css border by Ryoji Kimura (@ryjkmr) on CodePen.
canvasをdivで囲ったときに、divはcanvasのサイズに合わせてくれないので、canvasと同じwidthとheightを指定しています。
お絵かきソフトについてはまた回を改めて書きたいと思います。