在 Fabric.js 中全屏显示画布
Posted
技术标签:
【中文标题】在 Fabric.js 中全屏显示画布【英文标题】：Show canvas in fullscreen in Fabric.js 【发布时间】：2021-12-26 01:05:31 【问题描述】：我希望我的 canvas-Element 始终具有相同的大小 - 与客户端的屏幕分辨率无关。
如果用户使用浏览器进行缩放，画布元素应该始终具有相同的大小。
此外，纵横比应该始终相同 - 我想要一个 1920-1080 点的坐标空间。 （如果浏览器的比例不同，canvas-element 的一侧可以有边框）。
我设法用 html + css 实现了这一点：
= 100% 的屏幕 最大。坐标为 1920 x 1080但是当我实现 fabric.js 时，它改变了画布的大小。而且我无法将其设置为响应式设计。
如何使用 fabric.js 实现这一点？
【问题讨论】：
【参考方案1】：2.4.2-b版本的解决方案，官方Api方法：http://fabricjs.com/docs/fabric.js.html#line7130
它适用于我的代码，将宽度和高度设置为 100%：
fabricCanvas.setDimensions(
width: '100%',
height: '100%'
,
cssOnly: true
);
【讨论】：
【参考方案2】：经过一番试验，终于找到了一个只需要修改css-properties的解决方案。
答案很简单，虽然很长。
这是我的 html 正文：
<body onload='init()'>
<div id="canvasWrapper">
<canvas id="canvas" ></canvas>
</div>
</body>
这是我的 CSS：
*
padding: 0;
margin: 0;
border: 0;
body
overflow: hidden;
#canvasWrapper
background-color: red;
display: inline-block;
重要的部分是我的 canvas-wrapper 的“inline-block”，以及 body-element 的“overflow: hidden”。画布下方似乎有一些像素，这会使两个滚动条都出现。
经过一番试验，得到如下js-code：
function init()
resizeCanvas(); //resize the canvas-Element
window.onresize = function() resizeCanvas();
每当屏幕尺寸发生变化时，我的“resize”函数就会被调用。
整个技巧都在这个 resize-Function 中完成：
function resizeCanvas()
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var cv = document.getElementsByTagName("canvas")[0];
//var cc = document.getElementsByClassName("canvas-container")[0]; //In case of non-Static Canvas will be used
var cc = document.getElementById("canvasWrapper");
var cx,cy; //The size of the canvas-Element
var cleft=0; //Offset to the left border (to center the canvas-element, if there are borders on the left&right)
if(x/y > sizeX/sizeY) //x-diff > y-diff ==> black borders left&right
cx = (y*sizeX/sizeY);
cy = y;
cleft = (x-cx)/2;
else //y-diff > x-diff ==> black borders top&bottom
cx = x;
cy = (x*sizeY/sizeX);
cc.setAttribute("style", "width:"+x+"px;height:"+y+"px;"); //canvas-content = fullscreen
cv.setAttribute("style", "width:"+cx+"px;height:"+cy+"px;position: relative; left:"+cleft+"px"); //canvas: 16:9, as big as possible, horizintally centered
此函数计算窗口宽度，以及在不改变比例的情况下可能的最大画布尺寸。
之后，我将 wrapper-div 设置为 fullscreen-size，并将 canvas-Element 的大小设置为之前计算的大小。
无需更改画布元素的内容，也无需重绘任何内容，一切正常。
它是跨浏览器兼容的（在 Firefox 25、Chrome 31 和 Internet Explorer 11 上测试）
【讨论】：
在 if(x/y > sizeX/sizeY) 语句中 sizeX 和 sizeY 是什么？我是 Canvas 的新手。 @SalilMomin 这些是 2 个全局变量，我从配置文件加载。它们象征画布大小（画布内的坐标系大小，而不是屏幕上的实际 px 大小）。我将它们设置为var sizeX = 1920, sizeY = 1080;
因此，sizeX/sizeY 是我想要达到的比率。就我而言，它是16:9。以上是关于在 Fabric.js 中全屏显示画布的主要内容，如果未能解决你的问题，请参考以下文章
如何在Landscape中全屏显示UISplitViewController的DetailView
如何在带有新窗口和特定显示器的窗口中全屏启动 chrome 浏览器