有没有办法通过 canvas 缩放来避免信箱？

Question

我正在 Javascript 做一个小项目，使用 Pixi.js 作为渲染引擎。但是，我只发现了几种将 canvas 缩放到完整 window 的方法，这些方法似乎最适合当前版本。然而，它确实有一个警告，因为它会根据方向在两侧生成信箱。

Pixi 是否可以完全避免黑边？

这是我到目前为止的代码，因为它与缩放有关：

var application = null;
var GAME_WIDTH = 1060;
var GAME_HEIGHT = 840;
var ratio = 0;
var stage = null;
application = new PIXI.Application(
{
    width: GAME_WIDTH,
    height: GAME_HEIGHT,
    backgroundColor: 0x00b4f7,
    view: document.getElementById("gwin")
});

stage = new PIXI.Container(true);

window.addEventListener("resize", rescaleClient);

function rescaleClient()
{
    ratio = Math.min(window.innerWidth / GAME_WIDTH, window.innerHeight / 
    GAME_HEIGHT);
    stage.scale.x = stage.scale.y = ratio;
    application.renderer.resize(Math.ceil(GAME_WIDTH * ratio), Math.ceil(GAME_HEIGHT * ratio));     
}

我的目标是实现与 Agar.io/Slither.io 类似的完整 screen/window 效果，但是我还没有找到一种令人满意的方法来轻松实现。似乎确实有使用 Pixi 实现此目的的示例，但代码通常是闭源的，而且它们似乎使用外部工具，例如 Ionic 和 Phonegap。

Answer 1

var application;
//var GAME_WIDTH = window.screen.width-20;
var GAME_WIDTH = window.innerWidth;
//var GAME_WIDTH = document.body.clientWidth;
var GAME_HEIGHT = window.innerHeight;
var ratiox = 0;
var ratioy = 0;
var container;
application = new PIXI.Application(
{
    width: GAME_WIDTH,
    height: GAME_HEIGHT,
    backgroundColor: 0x00b4f7,
    view: document.getElementById("gwin")
});
//document.body.appendChild(application.view);
container = new PIXI.Container(true);
application.stage.addChild(container);

window.addEventListener("resize", rescaleClient);

function rescaleClient()
{
    //ratiox = Math.min(window.innerWidth / GAME_WIDTH, window.innerHeight /     GAME_HEIGHT);
    application.stage.scale.x = ratiox = window.innerWidth / GAME_WIDTH
 application.stage.scale.y = ratioy = window.innerHeight / GAME_HEIGHT;
    application.renderer.resize(Math.ceil(GAME_WIDTH * ratiox), Math.ceil(GAME_HEIGHT * ratioy));     
}

@viewport{
  width:device-width
}

body {
padding :0px;
margin:0px
}

<script src="https://pixijs.download/v4.6.2/pixi.min.js"></script>
<canvas id="gwin"></canvas>

Answer 2

我终于找到了答案。我接近正确的轨道，但还需要应用一些东西。

application.renderer.view.style.position = "absolute";
application.renderer.view.style.display = "block";
application.renderer.autoResize = true;
application.renderer.resize(window.innerWidth, window.innerHeight);

这在内部设置了一些额外的东西，同时对调整大小脚本进行了微小的修改...

ratio = Math.min(window.innerWidth / GAME_WIDTH, window.innerHeight / GAME_HEIGHT);
stage.scale.x = stage.scale.y = ratio;
renderer.resize(window.innerWidth, window.innerHeight);

配置正确，因此相关的渲染器 window 现在会在不挤压内容的情况下填满屏幕。

这并不容易发现。很多教程都放在前半部分，假设这是人们想要做的。

有没有办法通过 canvas 缩放来避免信箱？

Is there a way to avoid letterboxing with canvas scaling?

javascript

canvas

pixi.js