Fabric.js 事件

2018-11-27 20:04:22
6649次阅读
0个评论
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)
监听个别物件
收藏00

登录 后评论。没有帐号? 注册 一个。