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);

然后，我了解到x的{{1}}和y属性是相对于初始绘图位置的。因此square将使正方形保持在中间。

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

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答案。

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

Answer 3

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

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

3 个答案: