如何根据屏幕尺寸一致地缩放 Pixi.js 图形

Question

使用 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;

Answer 1

可以在应用上设置resolution属性以匹配window.devicePixelRatio

另请注意，PIXI.Text有自己的resolution属性，独立于Application.resolution属性。