加载无比例缩放的图像

Question

我正在寻找一种解决方案，以自定义的宽度和高度加载没有任何比例的图像。

 fabric.util.loadImage('path', (imgElement) => {
  let instance = new fabric.Image(imgElement, {
    top: this.canvas.getHeight() - height,
    left: (this.canvas.getWidth() / 2) - (width / 2),
    width: width,
    height: height
  });

  this.canvas.add(instance);
  this.canvas.renderAll();
});

我希望图像的尺寸为“宽度”和“高度”。绘制的对象具有正确的尺寸，但图像未完全显示。

结果：the result

原始图片：original image

感谢您的帮助，问候

Answer 1

最终通过scaleX和scaleY参数找到了解决方案。无法针对此问题使用scaleToWidth（）或scaleToHeight（）。

    fabric.util.loadImage(selection.door.openingDirection[0].geometry[0].image, (imgElement) => {
      let instance = new fabric.Image(imgElement, {
        top: this.canvas.getHeight() - height,
        left: (this.canvas.getWidth() / 2) - (width / 2),
      });

      instance.set({scaleX: width / instance.width, scaleY: height / instance.height});
      instance.setCoords();

      this.canvas.add(instance);
      this.canvas.renderAll();
    });