我正在使用FabricJS创建全屏画布并保存更改服务器端。在加载之前,我调整画布和背景的大小,以便在每个页面加载时画布都适合用户窗口。
canvas.setHeight($(window).height());
canvas.setWidth($(window).width());
canvas.backgroundImage.width = $(window).width();
canvas.backgroundImage.height = $(window).height();
问题是画布和背景得到调整但不是对象。它们保持相对于屏幕的相同位置,并且不会改变尺寸,因此在其他屏幕尺寸上是不相同的。怎样才能解决这个问题?
经过大量尝试后,我找到了一个解决方案,感谢AndreaBogazzi的提示。更改背景/画布大小/位置时,对象不会保持相对于背景/画布的大小/位置。
这就是为什么最好使用缩放功能,这样所有的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 );
这将导致画布始终保持最大尺寸而不会破坏比例,而不会离开屏幕并且所有元素保持正确的位置和高度。