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) 会将其置于我认为是前一个边界框的中心，这对我来说没有多大意义，因为我的原点被定义为上/左：

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

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;