gpt4 book ai didi

javascript - 进入和离开全屏时调整 Canvas 大小

转载 作者:行者123 更新时间:2023-11-30 17:17:58 25 4
gpt4 key购买 nike

我想在进入和离开全屏时调整 Canvas 的大小。我正在使用 three.js 及其 THREE.WebGLRenderer

使用下面的代码我可以做到这一点,但它会将窗口的尺寸设置为“一次迭代返回” - 这意味着当我进入全屏时它会设置较小的高度(但底部部分)然后我离开全屏它过度拉伸(stretch)它在垂直维度上。

代码:

  var width  = window.innerWidth,
height = window.innerHeight;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);

function toggleFullscreen(){
var docElm = document.documentElement;
if(!document.fullscreen){
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
document.fullscreen = true;
}
else{
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
document.fullscreen = false;
}
renderer.setSize(window.innerWidth, window.innerHeight);
}

...

<body>
<div onclick="toggleFullscreen()" id="button">Fullscreen</button>
</body>

最佳答案

toggleFullscreen() 函数中的setSize() 函数在进入或离开全屏之前被调用。这意味着渲染器的大小由先前的窗口大小设置。

通过requestFullscreenexitFullscreen进入或离开全屏触发onresize事件,所以编写setSize()函数在 onresize 事件处理函数中。

window.onresize = function() {
renderer.setSize(window.innerWidth, window.innerHeight);
}

关于javascript - 进入和离开全屏时调整 Canvas 大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25729387/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com