How to get the canvas-relative position of an object that is in a group?

Question

Normally an object's position relative to the canvas can be gotten from it's .left and .top attributes, but these become relative to the group if the object is in a selection/group. Is there a way to get their position relative to the canvas?

Answer 1

When an object is inside a group, its coordinates relative to the canvas will depend on the origin of the group (and origin of the object as well).

Lets say we have this code which has a rect and a circle added to a group.

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

var rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 50,
    top: 50,
    fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
    radius: 50,
    left: 175,
    top: 75,
    fill: '#aac'
});

var group = new fabric.Group([rect, circle],{
    originX: 'center',
    originY: 'center'
});
canvas.add(group);
canvas.renderAll();

Below are the three cases possible for centering the group:

1. Origin of group set to center(as in the code above):

   As shown in the figure below, rect.left gives us distance of left of object from center of the group. rect.group.left gives us the distance of center of group from left of canvas.

   So distance of rect from left of canvas = rect.left + rect.group.left (http://jsfiddle.net/uue3hcj6/3/)

   

2. Origin of group is set to top/left (also the default setting)

   rect.left gives us distance of left of object from center of the group. rect.group.left gives us the distance of left of group from left of canvas. Now to calculate the remaining distance, we have to add half of width of the group.

   So distance of rect from left of canvas = rect.left + rect.group.left + rect.group.width/2 (http://jsfiddle.net/uue3hcj6/6/)

   

3. Origin of group is set to bottom/right

   rect.left gives us distance of left of object from center of the group. rect.group.left gives us the distance of right of group from left of canvas. Now to calculate the total distance, we have to subtract the half of width of the group.

   So distance of rect from left of canvas = rect.left + rect.group.left - rect.group.width/2(http://jsfiddle.net/uue3hcj6/7/)

   

Note: Similar cases are possible for object as well.

Answer 2

just as a complement to Swapnil Jain's answer the same goes for the top attribute.

So:

absoluteLeft = rect.left + rect.group.left - rect.group.width / 2
absoluteTop = rect.top + rect.group.top - rect.group.height / 2

Answer 3

There is universal way to calculate position of any object on canvas regardless groups and origin:

const position = fabric.util.transformPoint(
  // you can choose point of object (left/center/right, top/center/bottom)
  object.getPointByOrigin('left', 'top'), 
  object.calcTransformMatrix()
)

Answer 4

The solution is to take into account the group width. The object.left is relative to the group's center, not it's left side, so we take group.width/2 :

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

var rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 50,
    top: 50,
    fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
    radius: 50,
    left: 150,
    top: 75,
    fill: '#aac'
});


canvas.add(rect);
canvas.add(circle);
canvas.renderAll();

function getPOS(){
    var group = canvas.getActiveGroup();
    if (group == null) {
        var pos = rect.left;
    }
    else {
        var pos = rect.group.left + rect.group.width/2 + rect.left;
    }
    alert("Position of rect from left:"+pos);
}

Answer 5

Had to solve this issue with another approach... I had to find images in JSON canvas data, so my code is:

let findItemByType = function(source, type, rX, rY)
{
    rX = rX ? rX : 0;
    rY = rY ? rY : 0;
    let objs = [];
    source.forEach(function(item){
        if (item.type === type){
            item.rX = rX + item.left;
            item.rY = rY + item.top;
            objs.push(item);
        }
        else {
            if (item.objects)
            {
                item.rX = rX;
                item.rY = rY;
                let subresult = findItemByType(item.objects, 
                type, 
                item.rX + item.left + item.width / 2, 
                item.rY + item.top + item.height / 2);
                if (subresult){
                    objs = objs.concat(subresult);
                }
            }   
        }
    });
    return objs;
}
let images = findItemByType(canvas.toJSON().objects, "image", 0, 0);

This code should bring an array of all image objects and they should have rX and rY attributes which is relative positions of images.

Answer 6

A method that does not need to judge the originX originY attribute.

const groupCenter = rect.group.getPointByOrigin('center', 'center');
absoluteLeft = rect.left + rect.group.left;
absoluteTop = rect.top + rect.group.top;