I'm trying to capture mouse events on rect placed inside a group but the event property "subTargets" is always empty.
function renderCanvas() {
rLog("Refresh canvas");
requestAnimationFrame(function() {
c.requestRenderAll();
});
}
function rLog(message) {
let item = document.createElement('div');
message = typeof message === 'undefined' ? 'undefined' : message;
item.textContent = typeof message === 'object' ? JSON.stringify(message) : message;
document.getElementById('logger').appendChild(item);
}
let c = new fabric.Canvas('myCanvas', {renderOnAddRemove: false});
let rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
c.add(rect);
let bgRectInG = new fabric.Rect({
left: 0,
top: 0,
fill: 'green',
opacity: 0.3,
width: 60,
height: 60,
evented: true,
subTargetCheck: true
});
let rectInG = new fabric.Rect({
left: 0,
top: 0,
fill: 'blue',
width: 20,
height: 20,
evented: true,
subTargetCheck: true
});
let g = new fabric.Group([bgRectInG, rectInG], {
left: 250,
top: 100,
width: 50,
height: 50,
subTargetCheck: false
});
c.add(g);
c.on('mouse:over', function(evt) {
// rLog(evt);
rLog(evt.subTargets)
});
renderCanvas();
Here is my example code https://jsfiddle.net/c7osmL3r/4/
Am I doing something wrong? I've tried many variants of object configurations but unsuccessfully.
Thanks for any reply :)