CODEWITHSUNDEEP
javascriptcanvasfabricjs
user9513304
user9513304

Reputation: 13

How to trigger or receive events of objects in the group?

I use Fabric.js to develop a ppt editor in online. I have a problem, a group A has B and C, I can listen Events of A, but I need also listen events of it's A and B. How to do it?

Upvotes: 1

Views: 966

Answers (1)

Durga
Durga

Reputation: 15614

you need to set subTargetCheck true for group object and then you can access subtargets from event which contains array of subTargets[]

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
  width:100,height:100,left:10,top:10,fill:'red'
});
var circle = new fabric.Circle({
  left:150,top:10,fill:'green',radius:50
});
var group = new fabric.Group([rect,circle],{
  left:20,
  top:20,
  subTargetCheck: true
 });
canvas.add(group);
group.on('mousedown',onMouseDown);

function onMouseDown(option){
 option.subTargets[0] && console.log(option.subTargets[0].type)
}
canvas{
 border: 1px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>

Upvotes: 1

Related Questions