Using Containspoint To Select Object In Group

From reading the documentation for Fabric on ContainsPoint (http://fabricjs.com/docs/symbols/fabric.Canvas.html#containsPoint), it states : Applies one implementation of 'point ins

Solution 1:

Solved! A little convoluted, but it works. I had to specifically calculate the starting and ending x/y based on the dimensions/position of both the group and the child object.

canvas.on('mouse:down', function(options) {

    if (options.target) {

        var thisTarget = options.target; 
        var mousePos = canvas.getPointer(options.e);

        if (thisTarget.isType('group')) {

            var groupPos = {
                x: thisTarget.left,
                y: thisTarget.top
            }

            thisTarget.forEachObject(function(object,i) {

                var objectPos = {
                    xStart: (groupPos.x - (object.left*-1) )  - (object.width / 2),
                    xEnd: (groupPos.x - (object.left*-1)) + (object.width / 2),
                    yStart: (groupPos.y - (object.top*-1)) - (object.height / 2),
                    yEnd: (groupPos.y - (object.top*-1)) + (object.height / 2)
                }

                if (mousePos.x >= objectPos.xStart && mousePos.x <= (objectPos.xEnd)) {

                    if (mousePos.y >= objectPos.yStart && mousePos.y <= objectPos.yEnd) {
                        console.log(objectPos);
                        console.log('Hit!',object);
                    }
                }

            });   
        }    

    }

});  

Here the updated fiddle: http://jsfiddle.net/LNt2g/4/

Solution 2:

Here working example:

fabric.util.object.extend(fabric.Object.prototype, {
getAbsoluteCenterPoint: function() {
  var point = this.getCenterPoint();
  if (!this.group)
    return point;
  var groupPoint = this.group.getAbsoluteCenterPoint();
  return {
    x: point.x + groupPoint.x,
    y: point.y + groupPoint.y
  };
},
containsInGroupPoint: function(point) {
  if (!this.group)
    returnthis.containsPoint(point);

  var center = this.getAbsoluteCenterPoint();
  var thisPos = {
      xStart: center.x - this.width/2,
      xEnd: center.x + this.width/2,
      yStart: center.y - this.height/2,
      yEnd: center.y + this.height/2
  }

  if (point.x >= thisPos.xStart && point.x <= (thisPos.xEnd)) {
      if (point.y >= thisPos.yStart && point.y <= thisPos.yEnd) {
          returntrue;
      }
  }
  returnfalse;
}});

http://plnkr.co/edit/4rlRPxwIqFIOvjrVYx8z?p=preview

Thanks to @mindwire22 answer and https://groups.google.com/d/msg/fabricjs/XfFMgo1Da7U/Hv7LsYa9hMEJ