Graphics 如何根据屏幕大小一致地缩放Pixi.js图形

使用Pixi绘制图形时，它们在移动设备上显示良好，但在桌面上，图形显示非常小，因为渲染器的大小不同，当前设置为窗口大小

我意识到我需要缩放我的图形，但我不确定实现这一点的最佳方法是什么，以使它们在所有（或大多数）屏幕大小上都成比例，无论是桌面还是移动屏幕

document.body.appendChild(this.app.view);
this.app.renderer.view.style.position = "absolute";
this.app.renderer.view.style.display = "block";
this.app.renderer.autoResize = true;
this.app.renderer.antialias = true;
this.app.renderer.backgroundColor = 0xe6f9ff;
this.app.renderer.resize(window.innerWidth, window.innerHeight);

然后我画一个图形

this.playerSprite.beginFill(0xff6961);
this.playerSprite.drawRect(0, 0, 24, 24);
this.playerSprite.endFill();
this.app.stage.addChild(this.playerSprite);

我知道我可以用某种比例因子来缩放图形

this.playerSprite.scale.x = someScaleFactor;
this.playerSprite.scale.y = someScaleFactor;

但是，在为不同设备缩放图形时，为了保持图形的最佳比例，最佳比例因子是什么？我应该选择一个目标尺寸，然后从那里放大还是缩小？就像这样

this.xScale = window.innerWidth / 411;
this.yScale = window.innerHeight / 731;

---

您可以在应用程序上设置

分辨率

属性以匹配

窗口。devicePixelRatio

还要注意，

PIXI.Text

有自己的

resolution

属性，它独立于

应用程序.resolution

属性