canvas.add(group)
getObjects() // 返回一组中所有对象的数组
size() // 所有对象的数量
contains() // 检查特定对象是否在 group 中
item() // 组中元素
forEachObject() // 遍历组中对象
add() // 添加元素对象
remove() // 删除元素对象
fabric.util.object.clone() // 克隆
// 控制第一个元素(椭圆)
group.item(0).set('fill', '#ea5455')
// 控制第二个元素(文本)
group.item(1).set({
text: '雷猴,世界',
fill: '#fff'
// rom:允许指定可设置动画的属性的起始值(如果我们不希望使用当前值)。
// duration:默认为500(ms)。可用于更改动画的持续时间。
// onComplete:在动画结束时调用的回调。
// easing:缓动功能。
// 请注意第二个参数:+=360
rect.animate('angle', '+=360', {
onChange:canvas.renderAll.bind(canvas), // 每次刷新的时候都会执行
duration: 2000, // 执行时间
easing: fabric.util.ease.easeOutBounce, // 缓冲效果
// 添加画布点击事件
canvas.on('mouse:down', options => {
console.log(`x轴坐标: ${options.e.clientX}; y轴坐标: ${options.e.clientY}`)
// 移除画布点击事件
canvas.off('mouse:down')
canvas.freeDrawingBrush.width = 10
// 画笔投影
canvas.freeDrawingBrush.shadow = new fabric.Shadow({
blur: 10,
offsetX: 10,
offsetY: 10,
affectStroke: true,
color: '#30e3ca',