前言

今天要來玩玩 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

今日小結

• 利用 fabric.Group() 來將物件群組起來。
• 把物件群組和解除群組
• 輕鬆地控制群組內的物件
• 今日 codepen - https://codepen.io/nono1526/pen/wYOapx