PixiJS 调整渲染器大小但保持比例？答案

【问题标题】：PixiJS resize renderer but keep ratio?PixiJS 调整渲染器大小但保持比例？
【发布时间】：2019-11-04 04:55:23
【问题描述】：

我正在使用 PIXI.JS 制作一款使用详细像素艺术的游戏。我想设计垂直方向的游戏（非常适合智能手机），但我也希望它适合浏览器窗口，并且比例保持不变。我还需要所有内容都可以扩展并保持完整。

有人可以帮忙吗？我做了这么多的研究，我的头开始疼了，我觉得我还没有走得太远。

【问题讨论】：

我不是 100% 你想要达到的目标，因为从描述中我不知道它是什么类型的游戏，所以在浏览器窗口中进行缩放和拟合你的意思是这样的? plnkr.co/edit/X9XexHw65aB5Sa6xSroZ?p=preview（使用鼠标滚动进行缩放）。还是别的什么？

标签： javascript html pixi.js

【解决方案1】：

结帐adaptive-scale

这是一个非常直观和简单的缩放库。

【讨论】：

【解决方案2】：

在 pixi 中调整渲染器的大小实际上非常容易。只需初始化一个渲染器。例如（需要一个 id 为“renderer”的画布）：

var renderer = PIXI.autoDetectRenderer(width, height, {antialias: false, transparent: false, resolution: 1, view: document.getElementById("renderer")});

然后根据需要决定调整渲染器的大小：

renderer.resize(newWidth, newHeight);

参考https://pixijs.github.io/docs/PIXI.WebGLRenderer.html。

【讨论】：