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属性无关。

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

1 个答案: