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

我对Pixi.js很感兴趣，所以这里有一个noob问题

我试图在屏幕中间显示一个正方形。当我调整窗口大小时，正方形应该保持在中间。

当我在画正方形的时候

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

属性是相对于初始绘图位置的。所以<代码>平方。x＝0 < /代码>将保持正方形在中间。

---

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

这可能是您的解决方案。这是直径调整响应

我用的是：

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

console.log=function（）{}；
var app=新的PIXI.Application({
自动调整大小：正确，
决议：1.77
});
document.querySelector（“#MYAPP”）.appendChild（app.view）；
const rect=new PIXI.Graphics（）
.beginll（0x55faaf）
.drawRect（-50，-50100100）；
app.stage.addChild（rect）；
window.addEventListener（'resize'，resize）；
函数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=函数（）{
调整大小（）；
};
画布{
显示：块；
}
#MYAPP{
位置：绝对位置；
溢出：隐藏；
最高：0%；
左：0%；
宽度：100%；
身高：100%；
}
我在PIXI工作了6个月。Pixi是使用Canvas回调进行2D渲染的最快库

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

关于如何使用PIXI调整窗口大小，有几个堆栈溢出的答案

我让多个项目重复使用常见的大小调整需求
哦，这样你就不会直接在预期位置[window.innerWidth/2，window.innerHeight/2]绘制矩形，而是相对[0,0]绘制矩形，然后再定位。明白了，谢谢！