fabricjs
Fabricjs canvas evenementen
Zoeken…
Syntaxis
on (eventName, handler) - Hiermee wordt een gebeurtenislistener met een callback aan het object toegevoegd.
off (eventName, handler) - Verwijder de gebeurtenislistener van het object. Als u deze functie zonder argumenten aanroept, worden alle gebeurtenislisteners van het object verwijderd.
trigger (eventName, optionsopt) - Vuurt de gebeurtenis en optionele optiesobject af .
parameters
| Parameter | Beschrijving |
|---|---|
eventName | De naam van de gebeurtenis waarop u zich wilt abonneren, zoals 'object: verplaatsen' |
eventHandler | De functie die u wilt uitvoeren wanneer die bepaalde gebeurtenis wordt geactiveerd |
optionsopt | Opties object |
Opmerkingen
Fabric ondersteunt een aantal evenementen om interactiviteit en uitbreidbaarheid mogelijk te maken. In te schrijven op feiten een doek gebruiken on werkwijze de manier waarop het gebruikt jQuery. En u wilt elke gebeurtenis handmatig activeren met de trigger methode. Alle evenementen vallen binnen het bereik van een bepaalde canvasinstantie. Ga naar Link voor meer informatie over evenementen
Fabric js canvas evenementen 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);
De bovenstaande code geeft weer hoe de gebeurtenis-API in Fabric.js werkt. Door een beroep te doen on de canvasinstantie, of zelfs op de Fabric.js andere objecten, zoals de Rect instantie, kunt u naar hun gebeurtenissen luisteren en wanneer de luisteraars worden geactiveerd, wordt de callback die u aan hen hebt doorgegeven ook geactiveerd.