An extension of fabricjs. Intends to implement objects and events missed in fabricjs.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
fabricext
.gitattributes
.gitignore
LICENSE
README.md
fabricext.sln

README.md

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;