FabricJS 对象不相对于画布调整大小

FabricJS objects not relative to canvas resize

本文关键字：调整 布调整 对象 相对于 FabricJS      更新时间：2023-09-26

我正在使用FabricJS创建一个全屏画布并保存服务器端的更改。在加载它之前，我调整了画布和背景的大小，以便在每次页面加载时画布都适合用户窗口。

canvas.setHeight($(window).height());
canvas.setWidth($(window).width());
canvas.backgroundImage.width = $(window).width();
canvas.backgroundImage.height = $(window).height();

问题是画布和背景被调整了，但对象没有被调整。它们相对于屏幕保持相同的位置，并且不会改变大小，因此在其他屏幕尺寸上是不合适的。如何解决这个问题？

经过多次尝试，由于AndreaBogazzi的提示，我找到了解决方案。更改背景/画布大小/位置时，对象不会相对于背景/画布保持大小/位置。

这就是为什么最好使用缩放功能，这样所有画布元素都会以相同的方式相对于彼此进行调整：

// background: background image
// zoom: zoom amount usable with canvas.setZoom(zoom).
if (background.width < $(window).width()) {
    zoom = $(window).height() / background.height;
    if ((zoom * background.width) > $(window).width()) {
        zoom = $(window).width() / background.width;
    }
} else {
    zoom = $(window).width() / background.width;
    if ((zoom * background.height) > $(window).height()) {
        zoom = $(window).height() / background.height;
    }
}
canvas.setZoom(zoom );

这将导致画布始终是其最大尺寸，无需离开屏幕，并且所有元素都保持正确的位置和高度。

相关文章：