FabricJS Catch click on object inside group
It is possible to listen for events on the inner object by adding the option: subTargetCheck: true
to the fabric.Group object.
// create a group
let group = new fabric.Group([circle, rect], {
subTargetCheck: true
});
circle.on('mousedown', function(e) {
// e.target should be the circle
console.log(e.target);
});
I downloaded fabricjs from asturur repo. build fabric.js file
node build.js modules=ALL exclude=json,gestures
and it works!
Then you can use events on objects in the groups.
canvas._objects[0]._objects[0].on('mousedown', function(e){ this.stroke = 'black'});
In my app i decided to search for events from mousedown callback
group.on('mousedown', function(e){
var innerTarget = group._searchPossibleTargets(e.e);
console.log(innerTarget);
});
group._searchPossibleTargets = function(e) {
var pointer = this.canvas.getPointer(e, true);
var i = objects.length,
normalizedPointer = this.canvas._normalizePointer(this, pointer);
while (i--) {
if (this.canvas._checkTarget(normalizedPointer, this._objects[i])) {
return this._objects[i];
}
}
return null;
}