使用Fabric.js以编程方式创建和选择组
问题描述:
假设我有一个包含6个对象的画布和一个位于画布外部的按钮.
Let's say I have a canvas containing 6 objects and a button outside of canvas.
当我单击此按钮时,其中三个对象将成为一个组并被选中,这些对象将保持其相对于画布的位置.
When I click this button, 3 of this objects will to become a group and selected, objects will keep their positions relative to canvas.
有可能吗?
我尝试了很多事情,但可以设法解决.我正在寻找的解决方案如下所示.
I tried so many things but could manage it to work. The solution that I'm looking for is something like below.
var objectList=[1,2,3];
var newgroup = new fabric.Group();
$.each(objectList, function (i) {
var obj = canvas.item(i);
newgroup.add(obj.clone());
canvas.remove(obj);
});
canvas.add(newgroup)
canvas.setActiveGroup(newgroup);
canvas.renderAll();
答
您可以使用类似的方法:
You can use something like that:
(function() {
var objectList = [1,2,3],
group = new fabric.Group();
canvas.forEachObject(function(o, i) {
if (objectList.indexOf(i) > -1) {
group.addWithUpdate(o);
canvas.remove(o);
}
});
canvas.setActiveObject(group);
canvas.add(group);
})();
只有索引1、2或3的对象才添加到组中.
Only the objects at index 1, 2 or 3 are added to group.