在 Fabric.js 中按宽度/高度在另一个画布对象内居中和缩放画布对象

Goal:将一个对象（水平和垂直）置于另一个对象（矩形或组）的中心canvas via Fabric.js或者通过Javascript保持原始对象的长宽比相同，但也不超过父对象的宽度/高度比例？

父对象（矩形或组）不会居中于canvas元素。

这是我到目前为止的代码：https://stackblitz.com/edit/angular-my8hky https://stackblitz.com/edit/angular-my8hky

My app.component.ts so far:

canvas: fabric.Canvas;

ngOnInit() {
  this.canvas = new fabric.Canvas('canvas');
  var rect = new fabric.Rect({
    left: 100,
    top: 50,
    width: 300,
    height: 200,
    fill: '#eee'
  });
  this.canvas.add(rect);

  fabric.Image.fromURL('https://angular.io/assets/images/logos/angular/[email protected] /cdn-cgi/l/email-protection', (img) => {
    let bounds = rect.getBoundingRect();
    let oImg = img.set({
      left: bounds.left,
      top: bounds.top,
      width: rect.width
    }).scale(1);
    this.canvas.add(oImg).renderAll();
  });
}

如果矩形对象高度减小（例如，50px高度）。

我意识到我只是声明内部图像对象宽度与父矩形边界宽度相同。

目前的解决方案：

父矩形width: 300 and height: 200:

父矩形width: 300 and height: 50:

所需的解决方案：

父矩形width: 300 and height: 200:

父矩形width: 300 and height: 50:

有人可以帮忙吗？

弄清楚了..这是 StackBlitz：https://stackblitz.com/edit/angular-pg4fis https://stackblitz.com/edit/angular-pg4fis

诀窍是首先将矩形添加到Fabric组，像这样：

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

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

this.canvas.add(rectGroup);

然后，我能够建立父（组）元素边界并使用可变缩放因子通过以下方式设置图像Math功能：

fabric.Image.fromURL('https://angular.io/assets/images/logos/angular/[email protected] /cdn-cgi/l/email-protection', (img) => {
  let bounds = rectGroup.getBoundingRect();

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

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

  rectGroup.addWithUpdate(img);
  this.canvas.renderAll();
});