如何为 Fabric.js 启用响应式设计 [英] How to enable responsive design for Fabric.js
问题描述
有没有办法使用浏览器调整 Fabric.js 画布的大小以在任何设备上启用相同的结果?我说的是响应式设计.
Is there a way to make a Fabric.js canvas resize with the browser to enable the same result on any device? I'm talking about responsive design.
有人有代码示例吗?
推荐答案
基本上你需要获取设备屏幕的宽度和高度.之后只需在您的 Javascript 中相应地调整画布的大小.示例:
Basically you need to get the device screen's width and height. Afterwards just resize the canvas accordingly in your Javascript. Example:
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;
不过,您的屏幕可能具有不同的分辨率,在这种情况下,我通常会计算原始宽度和设备的宽度比,然后使用该值相应地调整宽度和高度.示例:
You might have screens with varying resolution ratios though, what I usually do in this case is calculate your original width's and the device's width ratio and then adjust both width and height accordingly with that value. Example:
var originalWidth = 960; //Example value
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var widthRatio = originalWidth / width;
canvas.width *= widthRatio;
canvas.height *= widthRatio;
这通常对我来说在任何设备上都能正常工作,希望能有所帮助.
This usually works fine for me on any device, hope this helps.
这篇关于如何为 Fabric.js 启用响应式设计的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!