如何为Fabric.js启用响应式设计
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何为Fabric.js启用响应式设计相关的知识，希望对你有一定的参考价值。
是否可以通过浏览器调整Fabric.js画布的大小以在任何设备上启用相同的结果？我说的是响应式设计。
有人有代码示例吗？
答案
基本上，您需要获取设备屏幕的宽度和高度。然后，只需在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;
这通常对我在任何设备上都能正常工作，希望对您有所帮助。
另一答案
我知道已经有一段时间了，但是我找到了使用缩放功能的简便方法。
此代码在窗口大小调整完成时触发。它使我可以根据新尺寸确定缩放画布中所有内容所需的缩放系数。
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();
另一答案
根据jQuery元素的大小调整画布的大小。
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas()
canvas.setHeight(jQuery('#image').height());
canvas.setWidth(jQuery('#image').width());
canvas.renderAll();
resizeCanvas();
以上是关于如何为Fabric.js启用响应式设计的主要内容，如果未能解决你的问题，请参考以下文章