Fabricjs Selection On Multiple Objects On Mouse Click

Any suggestion on select multi objects on canvas mouse click? not all object, I want to select objects that overlay on the point. For my knowledge, the target on mouse event is alw

Solution 1:

Actually, there is already a library method for that: fabric.Object.prototype.containsPoint(). It works with rotate, but keep in mind that the point is checked against the bounding box, not the visible shape (e.g. circle shape still has a rectangular bounding box).

var canvas = this.__canvas = new fabric.Canvas('c');

functionloopOnObjects(e) {
  var mouse = canvas.getPointer(e.e, false);
  var point = new fabric.Point(mouse.x, mouse.y)
  
  var count = 0;
  canvas.getObjects().forEach(function(object, index){
    if (object.containsPoint(point)) {
    	count++;
    }
  });
}

functiongetElement(e) {
	loopOnObjects(e);
}

canvas.on("mouse:down", getElement);

canvas.add(new fabric.Rect({
    width: 100, height: 100, left: 100, top: 20, angle: -10,
    fill: 'rgba(0,200,0,0.5)'
  }));
canvas.add(new fabric.Rect({
    width: 50, height: 100, left: 220, top: 80, angle: 45,
    stroke: '#eee', strokeWidth: 10,
    fill: 'rgba(0,0,200,0.5)'
  }));
canvas.add(new fabric.Circle({
    radius: 50, left: 220, top: 175, fill: '#aac'
  }));

#c {
    border: 1px black solid;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script><canvasid="c"width="500"height="300"></canvas>