fabric.Group定位如何工作？

Question

我正在处理一个需要对象组的项目。我想在画布上绘制组后添加一些内容。我在下面的jsfiddle中提出了我想要完成的要点：http://jsfiddle.net/85x3hzx7/2/

首先，我绘制一个网格以帮助可视化位置。我添加了以下行，以便从左上角开始一个原点：

fabric.Object.prototype.originX = true; fabric.Object.prototype.originY = true;

这是由库的创建者建议的行，以便使用继承将原点设置为每个对象的左上角（请参阅：Canvas coordinates in Fabric.js have offset）。省略这行代码可以得到一个时髦的结果。在jsfiddle中，我添加了多个代码块，以便尝试实现我的目标：

1. 在代码块1中，我在组中添加一个Rectangle并将该组定位到（100,100）。这很好地按预期工作：



1. 在代码块2中，我定义一个Circle并将其添加到组中。这导致一些时髦的定位和组的尺寸变化：



1. 将圆圈设置为位置（0,0）会将其置于我认为是前一个边界框的中心位置，这对我来说没有多大意义，因为我的原点被定义为顶部/左侧：< / LI>

   

   如何定位圆圈，使其位于已创建群组的矩形的左上角？这里可能存在一个错误，或者我可能没有理解在组内定位的概念，以及向组添加内容对位置/维度的影响。

Answer 1

如果您更改圆圈的顶部和左侧坐标，如下所述，它将自己定位在您想要的坐标处。

var circle = new fabric.Circle({
  radius: 10,
  fill: 'red',
  originX: 'left',
  originY: 'top',
  left:group.left-(group.width/2),
  top:group.top-(group.height/2)
});

我不太清楚为什么我必须从组的左侧和顶部减去组宽度和高度的一半。这是你的小提琴编辑：http://jsfiddle.net/85x3hzx7/5/

虽然，如果您使用最新版本的Fabric.js，您只需要将要添加的新对象的左侧和顶部坐标设置为组的左侧和顶部坐标。您可以在此处查看最新版本的代码：http://jsfiddle.net/rpko8z0r/3/

请注意，在新的Fabric.js版本中，默认原点设置为左上角。因此，您不需要将每个对象的原点设置为左上角，也不需要遵循以下代码行。

fabric.Object.prototype.originX = true; 
fabric.Object.prototype.originY = true;