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

问题

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?

回答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:

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/)
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/)
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.

回答2:

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);
}

回答3:

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.

来源：https://stackoverflow.com/questions/29829475/how-to-get-the-canvas-relative-position-of-an-object-that-is-in-a-group

标签

javascript

fabricjs