Javascript 有没有一种方法可以避免使用画布缩放进行字母装箱？

我正在用Javascript进行一个小项目，使用Pixi.js作为渲染引擎。然而，我只找到了一些将画布缩放到完整窗口的方法，这些方法似乎最适合当前版本。不过，它确实有一个警告，因为它会根据方向在侧面生成信箱

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类似的全屏/窗口效果，但是我还没有发现一种令人满意的方法可以轻松实现。确实有一些例子使用Pixi来实现这一点，但代码通常是封闭源代码，而且它们似乎使用了诸如Ionic和Phonegap之类的外部工具。

var应用；
//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比率=0；
var容器；
application=new PIXI.application(
{
宽度：游戏宽度，
高度：游戏高度，
背景颜色：0x00b4f7，
视图：document.getElementById（“gwin”）
});
//document.body.appendChild（application.view）；
容器=新的PIXI.container（true）；
application.stage.addChild（容器）；
addEventListener（“调整大小”，重新缩放客户端）；
函数rescaleClient（）
{
//ratiox=Math.min（window.innerWidth/GAME\u WIDTH，window.innerHeight/GAME\u HEIGHT）；
application.stage.scale.x=ratiox=window.innerWidth/GAME\u WIDTH
application.stage.scale.y=ratioy=window.innerHeight/GAME_HEIGHT；
application.renderer.resize（Math.ceil（游戏宽度*ratiox），Math.ceil（游戏高度*ratioy））；
}

@视口{
宽度：设备宽度
}
身体{
填充：0px；
保证金：0px
}

---

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

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); 

正确配置内容，以便相关的渲染器窗口现在填充屏幕而不挤压内容

---

这是不容易发现的。很多教程都把它放在上半部分，并假设这是人们希望做的事情。

不清楚您希望做什么。。。在不裁剪图像的情况下保持纵横比会导致字母装箱。请更精确地解释或添加模拟预期结果的图片。本质上，我希望实现“真实”的全窗口效果，通过Agar.io和Slither.io演示。我确实理解，这两个版本似乎是在没有任何公共引擎、渲染或游戏的帮助下编写的，然而，根据我的研究，如果没有外部工具的帮助，可能无法完全实现。那么

application.renderer.resize（window.innerWidth、window.innderHeight）呢？我确实尝试过，但它似乎使缩放无效并挤压了舞台。@Merlin更新了答案不幸的是，这产生了完全相同的问题。调整大小后，内容会被挤压/扭曲，甚至会添加到未编辑的容器中。改变“渲染器”大小似乎是导致这种情况的直接原因。