Fabric.js把物件群组起來

2018-11-27 23:20:21
2382次阅读
0个评论
前言

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

收藏00

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