アイコンWeb制作実験

HTML/CSS/jQuery.

試した様子と結果です.

Fabric.jsでcanvasのイベントを取得して関数と関連付ける

イメージ

公開:

Fabric.jsはcanvasでの各種イベントを取得することができます。ここではjQueryのonメソッドでイベントと関数を対応づけ、そのイベントに応じた処理をする例を2つほど挙げています。

また全てのイベントの種類をリストしています。

クリックを取得

先ずユーザによるクリックを取得する例です。mouse:downイベントを取得し、クリックされた要素のtypeを表示しています。

type =

<canvas id="cvs" width="300" height="240"></canvas>
<p>type = <output id="res"></output></p>
var	canvas = new fabric.Canvas('cvs');

canvas.on('mouse:down', function(options) {
  if (options.target) {
    $('#res').text(options.target.type);
  }
});

targetが対象の要素となります。

移動を取得

次は要素の移動と離したイベントを取得する例です。移動中に透明度をつけると同時に拡大し、離すと戻ります。

//要素を移動
function objectmoving(options) {
  if (options.target) {
    options.target.set({opacity: .5, scaleX: 1.3, scaleY: 1.3});
  }
}

//要素を離す
function mouseup(options) {
  if (options.target) {
    options.target.set({opacity: 1, scaleX: 1, scaleY: 1});
  }
}

//関連付け
canvas.on({
  'object:moving': objectmoving,
  'mouse:up': mouseup
});

要素の移動と離したそれぞれのイベントハンドラを用意し、onメソッドで同時に関連付けた例です。

イベントの種類

Fabric.jsではcanvasにおいて下記のイベントを取得できます。

  • object:modified
  • object:rotated
  • object:scaled
  • object:moved
  • object:skewed
  • object:rotating
  • object:scaling
  • object:moving
  • object:skewing
  • object:selected this event is deprecated.event: use selection:created
  • before:transform
  • before:selection:cleared
  • selection:cleared
  • selection:updated
  • selection:created
  • path:created
  • mouse:down
  • mouse:move
  • mouse:up
  • mouse:down:before
  • mouse:move:before
  • mouse:up:before
  • mouse:over
  • mouse:out
  • mouse:dblclick
  • event:dragover
  • event:dragenter
  • event:dragleave
  • event:drop

例えば skewing は長方形を平行四辺形にする変形です。

このように、多種多様なイベントが用意されていて、ユーザ操作による可能性を広げてくれます