Fabric.js 事件

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)
监听个别物件