javascript - FabricJS 对象与 Canvas 调整大小无关

Question

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

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

问题是 Canvas 和背景得到了调整，但对象没有得到调整。它们相对于屏幕保持相同的位置并且不改变尺寸，因此在其他屏幕尺寸上是不正确的。如何解决这个问题？

Answer 1

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

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

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

这将导致 Canvas 始终保持最大尺寸，不会破坏比例，不会离开屏幕，并且所有元素都保持正确的位置和高度。