fabricjs - 小组成员不在小组中心

Question

我正在创建一个简单的组，其中包含圆圈和文本，我希望文本位于圆圈的中心。 (就像 Fabricjs.com 首页上的小组演示一样!)

var text = new fabric.Text('hello world', {
  fontSize: 30
});

var circle = new fabric.Circle({
  radius: 100,
  fill: '#eef',
});

var group = new fabric.Group([ circle, text ], {
  left: 150,
  top: 100,
  angle: -10
});

canvas.add(group);

事实上，我从群组教程页面的开头就采用了这一点，但删除了圆的scaleY以使非居中更加明显。

我有一个 JSFiddle，并且跟踪 Fabric 代码，我没有看到任何真正将内容居中的内容； Group.prototype._updateObjectCoords 只是按组的位置进行偏移，使内容的 top 和 left 只是相对于组本身的左上角。然而，它似乎可以在演示页面上运行!

http://jsfiddle.net/xGtvj/

Answer 1

从 1.4.0 Fabric.js 开始 changed default object origin to 'left'and 'top' 。相反，您需要将对象属性 originX 和 originY 设为 center:

fabricObject.set({
    originX: "center",
    originY: "center"
});

这是您修改后的 fiddle :http://jsfiddle.net/KSGL8/

您还可以使用以下两行全局恢复到以前的 1.4.0 行为:

// From 1.4.0 on, Fabric.js put left/top as default, restore old center/center
fabric.Object.prototype.originX = "center";
fabric.Object.prototype.originY = "center";