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

【问题标题】：Pixi.js - Re-positioning element after window resizePixi.js - 窗口调整大小后重新定位元素
【发布时间】：2019-11-13 01:39:14
【问题描述】：

我是 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 将保持正方形在中间。

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

【问题讨论】：

标签： javascript pixi.js

【解决方案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>

【讨论】：

哦，所以你不直接在预期的位置 [window.innerWidth/2, window.innerHeight/2] 绘制你的 Rect，你相对于 [0,0] 绘制它，然后才你定位它。明白了，谢谢！

【解决方案2】：

我在 PIXI 工作了 6 个月。 Pixi 是最快的带有 Canvas 回调的 2D 渲染库。

Pixi 制作了自己的具有固定尺寸的 Canvas 元素。它不像具有动态样式的 CSS。如果您希望在窗口调整大小时发生某些事情，您需要添加一个事件回调 window.addEventListener('onresize'

关于如何使用 PIXI 调整窗口大小有几个 Stack Overflow 答案。

Dynamically resize the pixi stage and it's contents on window resize and window load

【讨论】：

【解决方案3】：

我创建了adaptive-scale 以重用多个项目的常见调整大小需求

【讨论】：