FabricJS Catch click on object inside group

Question

I have tried many thing like calculating location, handling with the event we do have in original fabricjs. Does any have done this before?

Answer 1

May be this helps you http://jsfiddle.net/UKbaseduser/Kt9Mk/1/

$("#1").click(function(){
  ZoomIn('tmp1');
});
$("#2").click(function(){
  ZoomOut('tmp1');
});
$("#3").click(function(){
  ZoomIn('tmp2');
});
$("#4").click(function(){
  ZoomOut('tmp2');
});

var canvas = new fabric.Canvas('c');

var rect1 = new fabric.Rect({ left: 150, top: 150, width: 100, height: 100, fill: 'green'});
var rect2 = new fabric.Rect({ left: 250, top: 250, width: 100, height: 100, fill: 'green'});
rect1.grp='tmp1';
rect2.grp='tmp1';
var c = new fabric.Circle({
        left: 200,
        top: 200,
        radius: 50,
        fill: 'red',
        opacity:0.8
      });
c.grp='tmp2';
canvas.add(rect1);
canvas.add(rect2);
canvas.add(c);
canvas.renderAll();

function ZoomIn(inGrp){
    var SCALE_FACTOR = 1.2;
    var objects = canvas.getObjects();
    objects.forEach(function(obj){
        if (obj.grp==inGrp){     
            var scaleX = obj.scaleX;
            var scaleY = obj.scaleY;
            var left = obj.left;
            var top = obj.top;

            var tempScaleX = scaleX * SCALE_FACTOR;
            var tempScaleY = scaleY * SCALE_FACTOR;
            var tempLeft = left * SCALE_FACTOR;
            var tempTop = top * SCALE_FACTOR;
            obj.scaleX = tempScaleX;
            obj.scaleY = tempScaleY;
            obj.left = tempLeft;
            obj.top = tempTop;
            obj.setCoords();
            }
        });
    canvas.renderAll();
 }
function ZoomOut(inGrp){
    var SCALE_FACTOR = 1.2;
    var objects = canvas.getObjects();
    objects.forEach(function(obj){
        if (obj.grp==inGrp){     
            var scaleX = obj.scaleX;
            var scaleY = obj.scaleY;
            var left = obj.left;
            var top = obj.top;

            var tempScaleX = scaleX * 1/SCALE_FACTOR;
            var tempScaleY = scaleY * 1/SCALE_FACTOR;
            var tempLeft = left * 1/SCALE_FACTOR;
            var tempTop = top * 1/SCALE_FACTOR;
            obj.scaleX = tempScaleX;
            obj.scaleY = tempScaleY;
            obj.left = tempLeft;
            obj.top = tempTop;
            obj.setCoords();
            }
        });
    canvas.renderAll();
 }

Also there is similar discussion going on over here https://groups.google.com/forum/#!topic/fabricjs/hQwHxGfyx6w may be it throws you some pointers.