如何获取组中对象的画布相对位置？

Question

通常,对象相对于画布的位置可以从它.left和.top属性中获取,但如果对象位于选择/组中,则它们相对于组.有没有办法让他们相对于画布的位置？

Answer 1

当一个对象在一个组内时,它相对于画布的坐标将取决于该组的原点(以及该对象的原点).

假设我们有这个代码,它有一个矩形和一个圆圈添加到一个组.

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

以下是可能使小组居中的三种情况:

1. 组的原点设置为居中(如上面的代码所示):

   如下图所示,rect.left给出了物体左侧与组中心的距离. rect.group.left从画布的左边给出了组中心的距离.

   所以rect与画布左边的距离= rect.left + rect.group.left(http://jsfiddle.net/uue3hcj6/3/)

   

2. 组的原点设置为上/左(也是默认设置)

   rect.left给出了物体左侧与群体中心的距离. rect.group.left给我们画布左边的组左边距离.现在要计算剩余距离,我们必须添加该组宽度的一半.

   所以rect与画布左边的距离= rect.left + rect.group.left+ rect.group.width/2(http://jsfiddle.net/uue3hcj6/6/)

   

3. 组的来源设置为底部/右侧

   rect.left给出了物体左侧与群体中心的距离. rect.group.left从画布的左边给出了组右侧的距离.现在要计算总距离,我们必须减去该组宽度的一半.

   所以rect与画布左边的距离= rect.left + rect.group.left- rect.group.width/2(http://jsfiddle.net/uue3hcj6/7/)

   

注意:对象也可能有类似的情况.