Events（事件）

事件驅動的體系結構是框架內強大功能和靈活性的基礎。 Fabric也不例外，它提供了一個廣泛的事件系統，從低階的「滑鼠」事件到高階的物件事件。

這些事件使我們能夠利用畫布上發生的各種動作的不同時刻。是否想知道何時按下滑鼠？只需觀察“ mouse:down”事件即可。將物件加入畫布的時間怎麼樣？ 「object:added」在那裡為您服務。那麼當整個畫布重新渲染時又如何呢？只需使用“ after:render”。

事件API非常簡單，類似jQuery，Underscore.js或其他流行的JS函式庫。有on方法可以初始化事件監聽器，而off方法可以將其刪除。

讓我們來看一個實際的例子：

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

我們將事件「 mouse:down」事件偵聽器新增至畫布上，並為其提供事件處理程序，該處理程序將記錄事件起源的座標。換句話說，它將記錄滑鼠在畫布上的確切位置。事件處理程序接收一個options對象，該對象具有2個屬性：e-原始事件，target-畫布上單擊的對象（如果有）。該事件始終存在，但僅當您確實單擊畫布上的某個物件時，目標才存在。目標也僅傳遞給有意義的事件處理程序。例如，對於“ mouse:down”而不是“ after:render”（表示重新繪製了整個畫布）。

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

上面的範例將記錄“單擊了一個物件！”如果單擊一個物件。它還將顯示單擊的物件的類型。

那麼Fabric中還有哪些事件可用呢？好吧，在滑鼠級別的選單中有“ mouse:down”，“ mouse:move”和“ mouse:up”。從通用的開始，有“ after:render”。然後是與選擇相關的事件：“before:selection:cleared”，“selection:created”，“selection:cleared”。最後，物件是：“object:modified”，“object:selected”，“object:moving”，“object:scaling”，“object:rotating”，“object:added”和“object:removed”

請注意，每次移動（或縮放）一個物件（甚至移動一個像素）時，都會連續觸發「 object:moving」（或「 object:scaling」）之類的事件。另一方面，僅在操作（物件修改或選擇建立）結束時才觸發「 object:modified」或「 selection:created」之類的事件。

注意我們如何將事件直接附加到畫布上（canvas.on('mouse：down',...)）。可以想像，這意味著事件都限於畫布實例。如果頁面上有多個畫布，則可以將不同的事件偵聽器附加到每個偵聽器。它們都是獨立的，並且僅尊重分配給他們的事件。

為了方便起見，Fabric進一步擴展了事件系統，並允許您將偵聽器直接附加到畫布物件。讓我們來看看：

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');
});

我們將事件偵聽器直接附加到矩形和圓形實例。代替“ object:selected”，我們使用“ selected”事件。同樣，我們可以使用「 modified」事件（附加到畫布上時為「 object:modified」），「 rotating」事件（附加到畫布上時為「 object:rotating」），依此類推。