Fabricjs - capture event on object inside a group

Viewed 20

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 :)

0 Answers
Related