在Fabric.js中全屏显示画布 [英] Show canvas in fullscreen in Fabric.js
本文介绍了在Fabric.js中全屏显示画布的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望我的画布元素始终具有相同的大小-独立于客户端的屏幕分辨率。
如果用户使用浏览器进行缩放，则canvas-element应始终具有相同的大小。
此外，纵横比应该始终相同-我想要1920-1080点的坐标空间。(如果浏览器没有相同的比例，则画布元素的一侧可以有边框)。我设法用html+css实现了这一点：
- 使用=100%的屏幕
- max.坐标为1920x1080
但是当我实现Fabric.js时，它改变了画布的大小。我不能让它倒退，要有一个响应性的设计。
如何使用Fabric.js实现此目标？
推荐答案
经过一番试验，我终于找到了一个只需修改css属性的解决方案。
答案很简单，虽然很长。
这是我的html-body：
<body onload='init()'>
<div id="canvasWrapper">
<canvas id="canvas" width="100px" height="100px"></canvas>
</div>
</body>
这是我的CSS：
*{
padding: 0;
margin: 0;
border: 0;
}
body{
overflow: hidden;
}
#canvasWrapper {
background-color: red;
display: inline-block;
}
重要的部分是我的画布包装器的"内联挡路"，以及Body元素的"Overflow：Hidden"。画布下方似乎有一些像素，可以同时显示两个滚动条。
经过一番实验，我得到了以下js-code：
function init(){
resizeCanvas(); //resize the canvas-Element
window.onresize = function() { resizeCanvas(); }
}
每当屏幕大小更改时，都会调用我的"resize"函数。
整个技巧都在此调整大小函数中完成：
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设置为全屏大小，并将canvas-element的大小设置为先前计算的大小。
所有工作都不需要更改画布元素的内容，也不需要重新绘制任何内容。
它是跨浏览器兼容的(在Firefox 25、Chrome 31和Internet Explorer 11上测试)
这篇关于在Fabric.js中全屏显示画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
