Events

Den händelsedrivna arkitekturen är grunden för fantastisk kraft och flexibilitet inom ett ramverk. Fabric är inget undantag och tillhandahåller ett omfattande händelsesystem, från lågnivå "mushändelser" till högnivåobjekt.

Dessa händelser tillåter oss att utnyttja olika ögonblick av olika handlingar som händer på duken. Vill du veta när musen trycktes ner? Observera bara "mouse:down"-händelsen. Vad sägs om när objekt lades till på canvas? "object:added" är där för dig. Och hur är det när hela duken renderas om? Använd bara "after:render".

Event API är väldigt enkelt och liknar det för jQuery, Underscore.js eller andra populära JS-bibliotek. Det finns en metod för att initiera händelseavlyssnaren och av för att ta bort den.

Låt oss ta en titt på ett verkligt exempel:

var canvas = new fabric.Canvas('...');
canvas.on('mouse:down', function(options) {
  console.log(options.e.clientX, options.e.clientY);
});

Vi lägger till händelseavlyssnaren "mouse:down" på canvas och ger den en händelsehanterare som loggar koordinater för var händelsen härrörde. Med andra ord kommer den att logga var exakt på duken musen trycktes. Händelsehanteraren tar emot ett alternativobjekt, som har 2 egenskaper: e — den ursprungliga händelsen och målet — ett klickat objekt på arbetsytan, om något. Händelsen är närvarande hela tiden, men målet existerar bara om du faktiskt klickade på något objekt på duken. Målet skickas också bara vidare till hanterare av händelser där det är vettigt. Till exempel för "mouse:down" men inte för "after:render" (vilket anger att hela duken har ritats om).

canvas.on('mouse:down', function(options) {
  if (options.target) {
    console.log('an object was clicked! ', options.target.type);
  }
});

Exemplet ovan kommer att logga "ett objekt klickades på!" om du klickar på ett objekt. Den visar också vilken typ av objekt som klickas på.

Så vilka andra evenemang finns i Fabric? Tja, från musnivåer finns det "mus:ner", "mus:flytta" och "mus:upp". Från generiska finns det "after:render". Sedan finns det urvalsrelaterade händelser: "before:selection:cleared", "selection:created", "selection:cleared". Och slutligen, objekt etta: "objekt:modifierad", "objekt:vald", "objekt:rörlig", "objekt:skalning", "objekt:roterande", "objekt:tillagd" och "objekt:borttagen"

Observera att händelser som "object:moving" (eller "object:scaling") avfyras kontinuerligt varje gång ett objekt flyttas (eller skalas) även med en pixel. Å andra sidan aktiveras händelser som "objekt:modifierad" eller "selektion:skapad" endast i slutet av åtgärden (objektändring eller skapande av urval).

Notera hur vi fäste händelser direkt på canvas (canvas.on('mouse:down', ...)). Som du kan föreställa dig betyder detta att alla händelser är inriktade på kanvasinstanser. Om du har flera dukar på en sida kan du bifoga olika evenemangslyssnare till var och en av dem. De är alla oberoende och respekterar endast händelser som tilldelats dem.

För enkelhetens skull tar Fabric evenemangssystemet ännu längre och låter dig fästa lyssnare direkt på dukobjekt. Låt oss ta en titt:

var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
rect.on('selected', function() {
  console.log('selected a rectangle');
});

var circle = new fabric.Circle({ radius: 75, fill: 'blue' });
circle.on('selected', function() {
  console.log('selected a circle');
});

Vi kopplar evenemangslyssnare direkt till rektangel- och cirkelinstanser. Istället för "object:selected" använder vi "selected"-händelse. På liknande sätt kunde vi ha använt "modifierad" händelse ("objekt:modifierad" när du fäster på duk), "roterande" händelse ("objekt:roterande" när du fäster på duk) och så vidare.