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);

事实上，我已经从群组教程页面的开头采用了这一点，但删除了圈子的缩放比例，使非定心更明显。

我有一个JSFiddle，并且通过Fabric代码进行跟踪，我看不到任何真正集中内容的东西; Group.prototype._updateObjectCoords只是偏移了组的位置，制作了内容＆＃39; 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"
});

以下是您修改过的小提琴：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";

Answer 2

如果您希望将对象放在组中居中，但又希望在所有尺寸上都按相同的比例缩放对象的宽度/高度，请按以下步骤操作：

let bounds = group.getBoundingRect();

const scaleFactor = Math.min(
    Math.min(1, bounds.width / fabricObject.width),
    Math.min(1, bounds.height / fabricObject.height)
);

fabricObject.scale(scaleFactor);

fabricObject.set({
    top: bounds.top + Math.max(bounds.height - fabricObject.height * scaleFactor, 0)/2,
    left: bounds.left + Math.max(bounds.width - fabricObject.width * scaleFactor, 0)/2,
});

group.addWithUpdate(fabricObject);
this.canvas.renderAll();

此方法通过组内的“父”矩形完成。我的初始化方法是：

var rect = new fabric.Rect({
    left: 100,
    top: 50,
    width: 450,
    height: 200,
    fill: '#e3e3e3',
});

var group = new fabric.Group([rect], {
    name: 'Rectangle',
});

this.canvas.add(rectGroup);

StackBlitz：https://stackblitz.com/edit/angular-pg4fis

小组成员不以小组为中心

2 个答案: