Pixi.js

Question

我是 Pixi.js 的菜鸟，所以菜鸟问题来了。

我正在尝试在屏幕中间显示一个正方形。当我调整 window 的大小时，正方形应该留在中间。

画正方形时我用的是

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

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

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 是最快的 2D 渲染库，带有 Canvas 回调。

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

关于如何使用 PIXI 调整 window 的大小，有几个 Stack Overflow 答案。

Answer 3

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

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

Pixi.js - Re-positioning element after window resize

javascript