FabricJS对象与canvas不相关resize

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

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

问题是canvas和背景得到调整但不是对象。 它们相对于屏幕保持相同的位置,并且不会改变尺寸,因此在其他屏幕尺寸上是不相同的。 怎样才能解决这个问题?

经过大量的尝试,我得到了一个解决方案,感谢AndreaBogazzi的提示。 更改背景/canvas大小/位置时,对象不会保持相对于背景/canvas的大小/位置。

这就是为什么最好使用缩放function,这样所有的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始终处于最大尺寸而不会破坏比例,而不会离开屏幕并且所有元素保持正确的位置和高度。