我正在创建一个简单的组,其中包含圆圈和文本,我希望文本位于圆圈的中心。 (就像 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
只是相对于组本身的左上角。然而,它似乎可以在演示页面上运行!
最佳答案
从 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";
关于fabricjs - 小组成员不在小组中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24727126/