Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

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;

About

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

Topics

Resources

License

Releases

No releases published

Packages

No packages published

Languages