アイコンWeb制作実験

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

Fabric.jsでcanvasにフリーハンドの自由線を書く

イメージ

公開:

Fabric.jsを使用し、HTML5のcanvas内にフリーハンドで自由線を書く方法です。描かれた1筆分の線は1要素となり、通常の図形のように移動/拡縮/回転ができます。

デモ

先ずはお試しを。色や太さを変えたりして枠内をなぞってみてください。

このデモではモードを切り替えられるようにしています。要素選択モード(フリードローモードをオフ)にすると、書いた自由線の1筆分が1要素となって通常の図形のように移動/拡縮/回転ができます

・モード

・色

・太さ 1

ソースコード例

上記デモの一部コード例です。

<canvas id="cvs" width="300" height="240"></canvas>

<label><input type="radio" name="mode" value="draw" checked>自由線</label>
<label><input type="radio" name="mode" value="select">要素選択</label>

<lavel>色</label>
<input id="draw-color" type="color" value="#000">

<lavel>太さ</label>
<input id="draw-width" type="range" value="1" min="1" max="10" step="1">
var canvas = new fabric.Canvas('cvs');

//モード切替
$('[name=mode]').click(function(){
  if ($('[name=mode]:checked').val() === 'draw') {
    canvas.isDrawingMode = true;	//自由線
  } else {
    canvas.isDrawingMode = false;	//要素選択
  }
});

//色
$('#draw-color').change(function(){
  canvas.freeDrawingBrush.color = this.value;
});

//太さ
$('#draw-width').change(function(){
  canvas.freeDrawingBrush.width = this.value - 0;
});

行と説明

6,8
isDrawingMode = true で自由線が書け、false で要素選択ができます。書いた自由線やすでにある要素を選択できるようにするには false にします
14
freeDrawingBrush.colorは色の値で、'#000000'、'#000'、'rgb()'の形式の他に'black'など名称が使用できます。
19
freeDrawingBrush.widthは太さの値でピクセル単位です。-0で数値型に変換しています。文字型を代入すると一見動作するように見えますが、要素選択枠が異常な範囲になる場合があります。