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

目标:通过 Fabric.js 或通过 Javascript 保持原始对象的纵横比相同，但又不超过父对象的宽度/高度比例?

父对象(矩形或组)不会以 canvas 元素为中心.

这是我到目前为止的代码:

父矩形width: 300 and height: 50:

所需的解决方案:

父矩形width: 300 and height: 200:

父矩形width: 300 and height: 50:

有人可以帮忙吗?

解决方案

想通了.. 这里是 StackBlitz:https://stackblitz.com/edit/angular-pg4fis

诀窍是首先将矩形添加到 Fabric 组中，如下所示:

var rect = new fabric.Rect({左:100，最高:50，宽度:450，身高:200，填充:'#e3e3e3',});var rectGroup = new fabric.Group([rect], {名称:'矩形'，});this.canvas.add(rectGroup);

然后，我能够建立父(组)元素边界并使用可变比例因子通过 Math 功能设置图像:

fabric.Image.fromURL('https://angular.io/assets/images/logos/angular/logo-nav@2x.png', (img) => {让边界 = rectGroup.getBoundingRect();常量 scaleFactor = Math.min(Math.min(1, bounds.width/img.width),Math.min(1, bounds.height/img.height));img.scale(比例因子)；img.set({顶部:bounds.top + Math.max(bounds.height - img.height * scaleFactor, 0)/2,左:bounds.left + Math.max(bounds.width - img.width * scaleFactor, 0)/2,});rectGroup.addWithUpdate(img);this.canvas.renderAll();});

Goal: To center an object (horizontally and vertically) inside another object (rectangle or group) on canvas via Fabric.js or via Javascript which keeps the original object aspect ratio the same, but also not exceed the parent object width/height proportions?

The parent object (rectangle or group) won't be centered on the canvas element.

Here's the code I have so far: 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/logo-nav@2x.png', (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();
  });
}

Not only is the new object not centered vertically, but also not centered horizontally if the rectangle object height is decreased (for example to 50px in height).

I realize I'm only declaring the inner image object width to be the same as the parent rectangle boundary width.

Current solution:

Parent rectangle width: 300 and height: 200:

Parent rectangle width: 300 and height: 50:

Desired solution:

Parent rectangle width: 300 and height: 200:

Parent rectangle width: 300 and height: 50:

Can anyone assist?

解决方案

Figured it out.. Here's the StackBlitz: https://stackblitz.com/edit/angular-pg4fis

The trick was to first add the rectangle to a Fabric group, like so:

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

Then, I was able to establish the parent (group) element boundaries and use a variable scaling factor to set the image via Math functionality:

fabric.Image.fromURL('https://angular.io/assets/images/logos/angular/logo-nav@2x.png', (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();
});