Fabricjs - 在画布边界内缩放画布背景以“包含”

Posted 2021-04-15

我正在尝试设置方形fabric.js画布的背景图像，以便它在较长的一侧填充画布，同时保持纵横比，模拟css上的background-size : 'contain'效果。

意思是如果图像是纵向，高度应该填满屏幕，同时仍然保持纵横比。否则，如果图像是横向的，它应该在宽度侧填充画布，同时保持纵横比。

我有这个小提琴，完全缩放和覆盖画布，有点类似于css上的'background-size' : 'cover'。

https://jsfiddle.net/7s5obuk2/165/

但我还没能成功修改它以实现我上面谈到的内容。任何帮助表示赞赏。

答案

更改设置比例因子的条件，将bgImage.width与bgImage.height进行比较，如下所示：

        if (bgImage.width > bgImage.height) {
            scaleFactor = canvasWidth / bgImage.width;
            ...
        } else {
            scaleFactor = canvasHeight / bgImage.height;
            ...
        }

那应该能得到你所需要的，这里是小提琴： https://jsfiddle.net/dkr3c2n0/