CODEWITHSUNDEEP
fabricjs
sravankumar adepu
sravankumar adepu

Reputation: 13

fabricjs even listeners for objects in group

var canvas = new fabric.Canvas('canvDraw');
var c = new fabric.Circle({
  radius: 10,
  left: 0,
  fill: '#fff',
  opacity: 0.1
});
c.hasControls = true; // enable to chaneg circle size
c.hasBorders = true;
c.setOpacity(100);
c.visible = true;
c.fill = '#000';

var text = new fabric.Text("Very long text data displayed on hover", {
  width: '50px'
});
var group = new fabric.Group([c, text], {
  left: left,
  top: top
});
canvas.add(group);

I want to have events like text displaying on hover of the object c(circle in group). Tried c.on('mouse:over') but no luck.

Upvotes: 0

Views: 2122

Answers (1)

Durga
Durga

Reputation: 15614

You need to check for subTarget using subTargetCheck:true, on mouseover of group check added mouse:move event to canvas and check the targets if it is you circle then show the text are set visible:false to hide. And on mouseout remove the mouse:move event from canvas.

DEMO 

var canvas = new fabric.Canvas('canvDraw');
var c = new fabric.Circle({
  radius: 100,
  left: 0,
  fill: '#a6ff00'
});

var text = new fabric.Text("Very long text data displayed \n on hover", {
  width: '50px',
  fill: 'green',
  visible: false
});
var group = new fabric.Group([c, text], {
  left: 20,
  top: 20,
  subTargetCheck:true,
  perPixelTargetFind:true
});
canvas.add(group);
group.on('mouseover',function(option){
  canvas.on('mouse:move',onMouseMove)
});
group.on('mouseout',function(option){
  onMouseMove();
  canvas.off('mouse:move',onMouseMove)
});

function onMouseMove(option){
 var textObj = group.getObjects()[1];
 if(option && option.subTargets[0] && (option.subTargets[0].type == 'circle')){
  if(textObj.visible) return;
  textObj.visible = true;
 }
 else {
  if(!textObj.visible) return;
  textObj.visible = false;
 }
 group.dirty = true;
 canvas.requestRenderAll();
}
canvas{
 border:2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvDraw' width=500 height=300></canvas>

Upvotes: 1

Related Questions