小组成员不在小组中心

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将默认对象原点更改为'left'和'top'。相反，您需要对象属性originX并且originY是center：

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

这是您修改后的小提琴：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";