Fabricjs 還有一個很厲害的地方，他提供了相當完整個事件系統，我們想要監聽某個動作，就只需要像是 JQuery 那樣使用 on 來監聽事件，使用 off 來取消監聽事件。

Fabricjs 提供了良好的事件 Api，透過事件驅動的方式，讓我們能夠監聽使用者所做的一些操作，從對使用者滑鼠監聽，或是物件的改變都是沒有問題的。

可以監聽哪些事件

• 使用者滑鼠操作
• 物件狀態被改變時

使用者滑鼠事件

mouse:down

只要使用者對 canvas 做了滑鼠點擊，就會發生的事件。

// 監聽點擊事件
canvas.on('mouse:down', (e) => {
  console.log(e)
})

點擊 canvas 後，可以看到這邊開發人員工具的 console 找到一些資訊，我們得到了回傳事件，讓我們稍微看看裡面的東西。

pointer 座標位置

滑鼠點擊時的座標，回傳一個 fabric.Pointer，裡頭裝著 x , y 座標

target 目標物件

使用者點擊時，所選中的物件就是 target，若無選中就會是 null。

只要拿到 target，我們就可以對使用者所要選擇的物件做修改。

以下是有點擊到東西時 target 的資料

• 使用 target.type 能夠輕鬆取得目前被點選的物件型態

target.type // 取得目前新增物件的型態 (rect || circle || image)

這邊簡單示範點擊物件後，更改物件的顏色

// 點擊事件
let colorToggle = false
canvas.on('mouse:down', e => {
  console.log(e)
  const active = e.target
  if (active) {
    active.set({ fill: colorToggle ? 'red' : 'blue' })
    colorToggle = !colorToggle
    canvas.renderAll()
  }
})

轉變物件 (transform)

記錄了你對點擊到 object 所做的事情，
像是移動物件時 action: drag，這邊記錄了原始的 object 狀態
對他縮放就是 action: scale。

這邊記錄了原始的 scale 值
並且也提供了 target 物件資訊 (記錄改變後的值)

其他使用者事件

Fabricjs 還提供了很多使用者操作的事件綁定。
用法其實都和上面提到的差不多，這邊就列出他們不詳細在解說了。

• mouse:down
• mouse:move
• mouse:up
• mouse:down:before
• mouse:move:before
• mouse:up:before
• mouse:over
• mouse:out
• mouse:dblclick
• event:dragover
• event:dragenter
• event:dragleave
• event:drop

可配合 drag & drop 來把東西丟進 canvas 中，這個我們之後在來實作。

整體物件的事件綁定

我們會想監聽所有在 canvas 底下的物件所發生的任何事情。

像是被使用者移動、縮放、新增、刪除等動作。

這些我們都可以透過 canvas.on 來監聽所有在canvas 之下的物件。

• object:modified 當物件被更改時後
• object:rotated 當物件被旋轉後
• object:scaled 當物件被縮放後
• object:moved 當物件被移動後
• object:skewed 當物件被調整歪斜度後
• object:rotating 當物件被旋轉時
• object:scaling 當物件被縮放時
• object:moving 當物件被移動時
• object:skewing 當物件被調整歪斜度時
  動作後面加上 ed 的就是等使用者滑鼠放開後，才會發生的動作
  而後面加上 ing 的則是使用者在操作時就會發生的事件

下面舉些例子

object:modified

當我們對物件有所操控就會觸發這個事件，不論是縮放、旋轉、移動
可得到 target 物件以及 transform 物件

• target 被操控的物件
• transform 紀錄對他做了什麼事情

canvas.on('object:modified', e => {
  console.log(e)
})

object:moving

當物件被移動當下就會觸發事件
也可以得到當前的 target 狀態

let countMove = 0
canvas.on('object:moving', e => {
  console.log(e.target.type + countMove)
  countMove++
})

個別物件的事件綁定

如果今天我們不想對所有物件做綁定的話，也可以把事件綁定在單個物件上呦！

selected

當該物件被選擇時觸發事件

rect.on('selected', e => {
  console.log('HI!')
})

我們一樣可以對其他形狀的物件來傾聽他們的動作，如 modified 和 moving 之類的事件。

這邊還有太多的事件沒辦法一一的做示範
提供 fabricjs 官網的事件範例給大家參考
Fabric demo Event inspector: http://fabricjs.com/events

本日小結

• canvas 監聽使用者的動作 (mouse event)
• canvas 監聽所有物件動作 (object:modified)
• 監聽個別物件

本日 codepen