[英]Select All the objects on canvas using Fabric.js
Is there a way to explicitly select all the objects present at a particular instance of time. 有没有办法明确选择特定时刻出现的所有对象。 This can be easily done using mouse to select all. 这可以通过鼠标轻松完成全部选择。 Is there a code-solution like a button named Select All
so that clicking it would make all the fabric type objects being selected and then I could apply the changes to whole of that ActiveGroup using canvas.getActiveGroup();
是否有一个代码解决方案,如名为Select All
的按钮,以便单击它将使所有结构类型对象被选中,然后我可以使用canvas.getActiveGroup();
将更改应用于整个canvas.getActiveGroup();
and iterate over. 并迭代。
Good question. 好问题。
There's no built-in method for this, but you would need to do something along these lines: 没有内置的方法,但你需要做这些方面的事情:
var objs = canvas.getObjects().map(function(o) {
return o.set('active', true);
});
var group = new fabric.Group(objs, {
originX: 'center',
originY: 'center'
});
canvas._activeObject = null;
canvas.setActiveGroup(group.setCoords()).renderAll();
The code should be self-explanatory, and it's pretty much what's happening under the hood when you use mouse, shift+click, etc. 代码应该是不言自明的,当你使用鼠标,shift + click等时,它几乎就是在幕后发生的事情。
Using the current version of fabric.js (2.3.1) you can do this: 使用当前版本的fabric.js(2.3.1),您可以这样做:
canvas.discardActiveObject();
var sel = new fabric.ActiveSelection(canvas.getObjects(), {
canvas: canvas,
});
canvas.setActiveObject(sel);
canvas.requestRenderAll();
This is an quote from the demo page: http://fabricjs.com/manage-selection 这是演示页面的引用: http : //fabricjs.com/manage-selection
canvas.setActiveGroup
it's no longer an option. canvas.setActiveGroup
它不再是一个选项。 It was erased as a function in version 2.0 它在版本2.0中被删除为功能
这是一个更紧凑的形式:
canvas.setActiveGroup(new fabric.Group(canvas.getObjects())).renderAll();
selectAllObjects() {
this.canvas.discardActiveObject();
this.canvas.discardActiveGroup();
let objects: Fabric.Object[] = this.canvas.getObjects().map(function (object: Fabric.Object) {
return object.set('active', true);
});
if (objects.length === 1) {
this.canvas.setActiveObject(objects[0]);
} else if (objects.length > 1) {
let group: Fabric.Group = new Fabric.Group(objects.reverse(), {
canvas: this.canvas
} as any);
group.addWithUpdate(null);
this.canvas.setActiveGroup(group);
group.saveCoords();
this.canvas.trigger("selection:created", {
target: group
});
}
this.canvas.renderAll();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.