Angularjs Fabric.js自动大小组控制所包含对象更改大小的时间

当我有一组fabric IText对象并且我一起更改了它们的所有字体大小时，分组的文本对象都会根据字体大小缩小或增大，但是组控件和边框保持不变，而不是同时更改大小。我的问题是，在更改组内的对象后，如何使组控件自动调整大小

通过查看Fabric的代码，我不知道如何在组中首先设置边界。我尝试在组上调用

\u setCoords（）

和

setCoords（）

，但这会将组移动到画布上的0，0，并保持高度和宽度相同。调用

\u setCoords（true）

无效

我还尝试了下面的代码，在其中我试图用一个包含相同对象的新组替换旧组，理论上这将绘制新的边界，但这似乎是一个笨拙的解决方案。此外，它也不起作用：新的组边界和控件不会出现

var selected = [];
var all = scope.canvas.getObjects();
for(var x in all) {
    if(all.active) {
        selected[selected.length] = x;
    }
}
scope.canvas._discardActiveGroup();
var objects = [];
for(var x in selected) {
    objects[x] = scope.canvas.getObjects()[x];
}
var group = new fabric.Group(objects,{
    originX: 'center',
    originY: 'center',
    canvas: scope.canvas
});

//Using $timeout so that this will wait until current $scope digest is finished
$timeout(function () {
    scope.canvas.setActiveGroup(group);
    scope.canvas.renderAll();
}, 0);
scope.canvas.renderAll();

编辑：

---

我认为这与另一个问题有关，在文本对象由于字体大小的改变而改变大小之后，它的选择区域仍然保持在大小改变之前的位置。也就是说，如果在调整大小前的边界矩形内单击，则无论调整大小后的边界矩形如何，它都会选择对象。只有在选择其他对象或取消选择所有对象后，选择才会按预期对该对象起作用。我为对象调用

setCoords（）

，以便正确绘制它们的边界

正如我在编辑问题时所说，这个问题分为两部分。解决我的问题需要以下两种解决方案

Bug#1:IText对象的选择区域保持大小更改前的状态，即使使用

setCoords（）

。这是因为

setCoords（）

“根据当前角度、宽度和高度设置角点位置坐标”--但它不会根据文本的更改更新宽度和高度。仅在方法

\u renderviative（ctx）

期间发生：

解决方案：因为我实际上使用了IText的自定义降序类，所以我使用了

setCoords

函数的重写来修复它。类似这样的重写应该是IText类的一部分：

/** @Override */
setCoords : function () {
    var ctx = this.canvas.getContext();
    var textLines = this.text.split(this._reNewline);
    this._setTextStyles(ctx);
    this.width = this._getTextWidth(ctx, textLines);
    this.height = this._getTextHeight(ctx, textLines);
    this.callSuper('setCoords');
},

Bug#2:组的选择区域在包含更改大小的IText对象后不会刷新，即使您调用

setCoords

。如果使用false参数调用

\u calcBounds

，它会通过计算对象的中心点来设置组的中心点——但由于对象已重置为相对于组中心的坐标为（0,0），因此重新计算时会使用（0,0）作为中心，因此，整个组移动，使其中心位于画布上的（0,0）。如果使用true参数调用

\u calcBounds

，它将围绕其原始中心而不是新中心调整大小，并且无法手动重置中心，因为这也会使对象移动

解决方案：通过重置对象坐标从头开始重新计算边界。我主要是通过分解函数

addWithUpdate（object）

来实现的

/** @Override */
setCoords : function () {
    var ctx = this.canvas.getContext();
    var textLines = this.text.split(this._reNewline);
    this._setTextStyles(ctx);
    this.width = this._getTextWidth(ctx, textLines);
    this.height = this._getTextHeight(ctx, textLines);
    this.callSuper('setCoords');
},

// set the objects to their not-in-group coordinates
activeGroup.destroy(); 
// since _restoreObjectsState (inside destroy) set objects inactive, set them active
activeGroup.forEachObject(activeGroup._setObjectActive, activeGroup);
// now we can call _calcBounds without bouncing the group to 0,0
activeGroup._calcBounds();
// set the objects to their in-group coordinates
activeGroup._updateObjectsCoords();