mazong1123 / fabric.ext

An extension of fabricjs. Intends to implement objects and events missed in fabricjs.

fabric.ext

An extension of fabricjs. Intends to implement objects and events missed in fabricjs.

How to use

Reference the fabric.canvasex.js in your html:

<script src="scripts/fabric.canvasex.js"></script>

Create a canvasex object and use it:

Events

<script>
  var canvas = new fabric.CanvasEx('c');
  canvas.on('mouse:dblclick', function (options) {
    console.log('mouse:dblclick');
  });
  
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 300,
    height: 300
  });
  
  rect.on('object:dblclick', function (options) {
    console.log('object:dblclick');
  });
  
  canvas.add(rect);
</script>

Supported Events and Objects:

Events

canvas:

// Double click
canvas.on('mouse:dblclick', function (options) {
});

// Mouse right button down
canvas.on('mouse:down', function (options) {
  if (options.e.which === 3) {
    console.log('Canvas right mouse down.');
  }
});

object:

// Double click
rect.on('object:dblclick', function (options) {
});

// Mouse right button down
rect.on('mousedown', function (options) {
  if (options.e.which === 3) {
    console.log('Object right mouse down.');
  }
});

Event for objects inside a group

By default, any object inside a group will not recieve any event individually. Add below line of code if you want group objects recieve events individually.

canvas.fireEventForObjectInsideGroup = true;