Pixi.js - 調整窗口大小后重新定位元素

Question

我對 Pixi.js 是個菜鳥，所以菜鳥問題來了。

我試圖在屏幕中間顯示一個正方形。 當我調整窗口大小時，正方形應該保持在中間。

繪制我正在使用的正方形時

const square = new PIXI.Graphics();
square.beginFill(0xff0000, 1);
square.drawRect(app.renderer.width /2, app.renderer.height / 2, 50, 50);
square.endFill();
app.stage.addChild(square); 

然后，我明白square的x和y屬性是相對於初始繪圖位置的。 所以square.x = 0將保持正方形在中間。

但是，當我調整窗口大小時，如何重置窗口的中心（以及正方形的位置）？

Answer 1

這可以成為您的解決方案。 這是直徑調整大小響應。

我使用類似的東西：

  getWidthByPer : function (per) {
     return window.innerWidth / 100 * per
  }

 console.log = function(){}; var app = new PIXI.Application({ autoResize: true, resolution: 1.77 }); document.querySelector("#MYAPP").appendChild(app.view); const rect = new PIXI.Graphics() .beginFill(0x55faaf) .drawRect(-50, -50, 100, 100); app.stage.addChild(rect); window.addEventListener('resize', resize); function resize() { const parent = app.view.parentNode; app.renderer.resize(parent.clientWidth, parent.clientHeight); rect.position.set( app.screen.width / 2 , app.screen.height / 2 ); } window.onload = function(){ resize(); };

 canvas { display:block; } #MYAPP { position: absolute; overflow: hidden; top:0%; left:0%; width: 100%; height: 100%; }

 <script src="https://pixijs.download/v4.7.0/pixi.min.js"></script> <div id="MYAPP"></div>

Answer 2

我在 PIXI 工作了 6 個月。 Pixi 是使用 Canvas 回調進行 2D 渲染的最快庫。

Pixi 制作了自己的具有固定尺寸的 Canvas 元素。 它不像具有動態樣式的 CSS。 如果你想在窗口調整大小時發生一些事情，你需要添加一個事件回調 window.addEventListener('onresize'

有幾個關於如何使用 PIXI 調整窗口大小的 Stack Overflow 答案。

動態調整 pixi 舞台的大小及其在窗口調整大小和窗口加載時的內容

Answer 3

我進行了自適應縮放以重用多個項目的常見調整大小需求