Fabric JS 背景图片大小问题

Question

因此，有多种方法可以加载画布背景图像，但在我的代码中，我像这样加载它：

var canvas = new fabric.Canvas('canvas', { backgroundImage: "<?php echo $image; } ?>", }

在我发现的教程中（https://www.tutorialspoint.com/how-to-create-a-canvas-with-background-image-using-fabricjs）它展示了如何设置画布高度和宽度，例如所以：

canvas.setWidth(document.body.scrollWidth / 2.2);
canvas.setHeight(650);

但是我需要调整背景图像本身而不是整个画布的大小，而且我在网上找不到任何描述如何执行此操作的地方。从逻辑上讲，当我最初设置画布背景图像时应该设置如下所示：

var canvas = new fabric.Canvas('canvas', { backgroundImage: "<?php echo $image; } ?>", backgroundImageWidth: "50%", backgroundImageHeight: "100%",}

但这不起作用，我尝试了其他一些方法，例如 setBackgroundImageWidth: 或 backgroundSize: 等......只是在黑暗中拍摄。我找不到任何描述以这种方式设置背景图像大小的 stackoverflow 问题。有谁知道该怎么做吗？

Answer 1

无法在fabricJS 的构造函数中指定背景图像的尺寸。当您从 URL 加载图像时，您必须利用 Image 类的

fromURL()

方法来实例化 FabricJS Image，然后您可以将其与

backgroundImage

属性一起使用。

fromURL() 方法接受一个回调函数，该函数应该负责图像的实际大小调整。不幸的是，你不能简单地改变宽度和高度，因为 FabricJS 在内部锁定了宽高比。相反，您必须计算所需的宽度和高度作为比例，并使用图像的

.scaleX

和

.scaleY

属性。

这是一个例子：

let canvas = document.createElement("canvas");
document.body.appendChild(canvas);
let canv = new fabric.Canvas(canvas, {
    backgroundColor: 'rgba(230, 230, 230, 1)',
    backgroundImage: fabric.Image.fromURL("https://picsum.photos/id/237/400/300", (img) => {

        img.scaleX = canv.width * 0.5 / img.width;
        img.scaleY = canv.height * 0.5 / img.height;

        canv.backgroundImage = img;
        canv.renderAll();
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>