Fabricjs canvas events
Remarks:
Fabric supports a number of events to allow for interactivity and extensibility. In order to subscribe to events for a canvas use the on method the way its used in jQuery. And you wish to manually trigger any event use the trigger method. All the events are within the scope of a particular canvas instance. Visit Link for more information on events
Fabric js canvas events Demo
<canvas id="c" width="400" height="400"></canvas>
var canvas = new fabric.Canvas("c");
canvas.on('mouse:up', function () {
console.log('Event mouse:up Triggered');
});
canvas.on('mouse:down', function () {
console.log('Event mouse:down Triggered');
});
canvas.on('after:render', function () {
console.log('Event after:render Triggered');
});
canvas.on('object:moving', function () {
console.log('Event object:moving Triggered');
});
canvas.on('object:modified', function () {
console.log('Event object:modified Triggered');
});
var text = new fabric.Textbox('Hello world', {
width:250,
cursorColor :"blue"
});
canvas.add(text);
The code above displays how the event API in Fabric.js works. By calling
on on the canvas instance, or even on the Fabric.js other objects,
such as Rect instance, you can listen to their events and when the
listeners are triggered, the callback you passed to them will be
triggered as well.
Syntax:
-
on(eventName, handler) - Attaches an event listener with a callback to the object.
-
off(eventName, handler) - Remove the event listener from the object. Calling this function witout any arguments will remove all event listeners on the object.
-
trigger(eventName, optionsopt) - Fires the event and optional options object.
Parameters:
| Parameter | Description |
|---|---|
eventName | The name of the event you want to subscribe such as 'object:moving' |
eventHandler | The function you want to execute when that particluar event is triggered |
optionsopt | Options object |
Contributors
Topic Id: 7532
Example Ids: 24850
This site is not affiliated with any of the contributors.