fabricjs
Fabricjs lienzo eventos
Buscar..
Sintaxis
on (eventName, handler) : asocia un detector de eventos con una devolución de llamada al objeto.
off (eventName, handler) : elimina el detector de eventos del objeto. Al llamar a esta función sin argumentos, se eliminarán todos los detectores de eventos en el objeto.
trigger (eventName, optionsopt) : dispara el evento y el objeto de opciones opcionales.
Parámetros
| Parámetro | Descripción |
|---|---|
eventName | El nombre del evento que desea suscribir, como 'objeto: mover' |
eventHandler | La función que desea ejecutar cuando se desencadena ese evento particluar |
optionsopt | Objeto de opciones |
Observaciones
Fabric admite varios eventos para permitir la interactividad y la extensibilidad. Para suscribirse a eventos para un lienzo, use el método on la forma en que se usa en jQuery. Y desea activar manualmente cualquier evento, utilice el método de trigger . Todos los eventos están dentro del alcance de una instancia de lienzo en particular. Visita el enlace para más información sobre eventos.
Tela js lienzo eventos 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);
El código anterior muestra cómo funciona la API de eventos en Fabric.js. Al llamar on la instancia del lienzo, o incluso a los otros objetos de Fabric.js, como la instancia de Rect , puede escuchar sus eventos y, cuando se activan los oyentes, también se activará la devolución de llamada que les haya pasado.