如何为Fabric.js启用响应式设计

Question

是否可以通过浏览器调整Fabric.js画布的大小以在任何设备上启用相同的结果？我说的是响应式设计。

有人有代码示例吗？

Answer 1

基本上，您需要获取设备屏幕的宽度和高度。然后，只需在Javascript中相应地调整画布的大小即可。示例：

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
var canvas = document.getElementById("canvas");
canvas.width = width;
canvas.height = height;

尽管您的屏幕可能具有不同的分辨率，但是在这种情况下，我通常要做的是计算原始宽度和设备的宽度比，然后使用该值相应地调整宽度和高度。示例：

var originalWidth = 960;  //Example value
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var widthRatio = originalWidth / width;
canvas.width *= widthRatio;
canvas.height *= widthRatio;

这通常对我在任何设备上都能正常工作，希望对您有所帮助。

Answer 2

我知道已经有一段时间了，但是我找到了使用缩放功能的简便方法。

此代码在窗口大小调整完成时触发。它使我可以根据新尺寸确定缩放画布中所有内容所需的缩放系数。

function rescale_canvas_if_needed()
{
	var optimal_dimensions = get_optimal_canvas_dimensions();
	var scaleFactor=optimal_dimensions[0]/wpd.canvas_w;
	if(scaleFactor != 1) {
		wpd_editor.canvas.setWidth(optimal_dimensions[0]);
		wpd_editor.canvas.setHeight(optimal_dimensions[1]);
		wpd_editor.canvas.setZoom(scaleFactor);
		wpd_editor.canvas.calcOffset();
		wpd_editor.canvas.renderAll();
  }
}

$( window ).resize(function() {
	clearTimeout(resizeId);
	resizeId = setTimeout(handle_resize, 500);
 });
 
 function handle_resize()
 {
	$(".canvas-container").hide();
	rescale_canvas_if_needed();
	$(".canvas-container").show();               
	 
 }

Answer 3

根据jQuery元素的大小调整画布的大小。

window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
    canvas.setHeight(jQuery('#image').height());
    canvas.setWidth(jQuery('#image').width());
    canvas.renderAll();
}
resizeCanvas();