One issue I am facing is with my method for selecting objects on the canvas by clicking a button. How do I ensure that it skips selecting groups and only selects individual objects?
Generating a group of shapes here:
const group = new fabric.Group([
new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
new fabric.Rect({
width: 100,
height: 100,
fill: 'green',
left: 100,
top: 100
})
])
this.canvas.add(group)
Creating an individual shape:
let rect1 = new fabric.Rect( {
width: 100,
height: 100,
fill: 'transparent',
stroke: 'blue',
left: 140
});
this.canvas.add(rect1)
Creating another individual shape:
let rect2 = new fabric.Rect( {
width: 100,
height: 100,
fill: 'transparent',
stroke: 'blue',
left: 240
});
this.canvas.add(rect2)
My current select method is selecting both the group and individual objects. How can I modify it to only select individual objects and not groups?
multiseleccion(){
this.canvas?.discardActiveObject();
this.selection = new fabric.ActiveSelection(this.canvas?.getObjects(), {
canvas: this.canvas
});
this.canvas?.setActiveObject(this.selection);
this.canvas?.requestRenderAll();