如何将对象添加到ActiveObject?

时间:2016-12-18 21:00:15

标签: fabricjs

Sample Image

我想为任何对象添加一个小矩形(充当外部文件的按钮),并创建一个可以在画布上一起移动的组。如果不需要,用户可以在以后删除该按钮。

有人可以建议一个很好的方法来实现这个目标吗?

我已设法添加自定义上下文菜单并向图像添加按钮,但我无法将活动对象和按钮组合在一起。

1 个答案:

答案 0 :(得分:0)

https://jsfiddle.net/fbgu7697/2/

function newRect(index) {
    return new fabric.Rect({
    width: 100,
    height: 100,
    top: index * 30,
    left: index * 30,
    fill: '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6),
  });
}

var canvas = new fabric.Canvas('canvas');

var rect0 = newRect(0);
canvas.add(rect0);

var rect1 = newRect(1);
canvas.add(rect1);

var rect2 = newRect(2);
canvas.add(rect2);

var group = new fabric.Group([rect0, rect1]);

canvas.setActiveGroup(group).renderAll();

setTimeout(function() {
  canvas.discardActiveGroup().renderAll();
}, 5000);