Fabric.js把物件群组起來

前言

今天要来玩玩 Fabricjs 一个很好用的群组功能，能够把多个物件群组成一个，就像我们常用的那些绘图软体有的群组功能一样，可以把不同的物件群组起来，让他们可以一起被使用者移动、缩放、删除。

建立群组

透过滑鼠

其实当我们在產生一张 canvas 后，fabricjs 就能让我们透过滑鼠拖曳，来达到多选群组的效果了！

透过将多个物件群组起来，让使用者能够一次操控多个物件的属性，如大小以及一起移动、旋转。



其实 fabricjs 当使用者使用滑鼠将多个物件选取起来时，偷偷的建立了一个暂时 fabric.Group 的物件，并且把你所选取的物件装起来。

透过 toGroup 做群组

不过这样当点到别的区域时群组就会消失了，我们试著把物件永久的群组起来。

这边先将要群组的物件选取，使用 canvas.getActiveObject() 取得所有被选取的物件。

呼叫 toGroup() 将他们群组起来。

function group () {
  canvas.getActiveObject().toGroup()
}

解除群组

使用 toActiveSelection 解除群组。

function ungroup () {
  canvas.getActiveObject().toActiveSelection();
}

透过 new fabric.Group

也可以透过 new fabric.Group 的方式，来将以知物件群组。

const rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red',
  left: 250,
  top: 250
})
const text = new fabric.Text('halo', {
  left: 250,
  top: 250
})
const mix = new fabric.Group([rect, text])
canvas.add(mix)

再来看看我们能透过 fabric.Group 做哪些事情。

fabric.Group

将物件群组起来后，我们就可以轻鬆地控制群组内的所有物件，并且可以简单快速的新增、删除群组内的物件，而且可以透过群组的相对位置新增物件。

先主动把之前所建立的所有物件的群组起来，再来做之后的操作。

const dog = new fabric.Group(canvas.getObjects(), {
  top: 30,
  left: 30
})
// 清空原来的
canvas.clear().renderAll()
// 建立我们组合好的 group
canvas.add(dog)
group.getObjects()

可以如同 canvas.getObjects() 一样，使用 group.getObjects() 来取得群组内的所有物件。

function getDogObjects() {
  return dog.getObjects()
}
group.addWithUpdate()

在群组中加入新物件，并且透过群组的相对位置来新增。

直接使用 group.add() 也能把物件加入群组中，不过是依照整个 canvas 的定位去新增。

const tail = dog.addWithUpdate(new fabric.Rect({
  width: 20,
  height: 5,
  top: dog.top + 50,
  left: dog.left - 10,
  fill: '#DDAA00'
}))
group.item()

可使用 group.item() 来取得群组中的物件，就像是 canvas.item() 那样。

group.remove()

移除群组裡面的物件。

dog.remove(dog.item(0))

group.type

fabricjs 的物件都有自己的 type，可以透过 group.type 发现自己的型态。

console.log(dog.type) // group