How to get the canvas-relative position of an object that is in a group?
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
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.
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()
)