1
votes

Pixi.js - Repositionnement de l'élément après le redimensionnement de la fenêtre

Je suis assez noob avec Pixi.js, alors voici la question noob.

J'essaye d'afficher un carré au milieu de l'écran. Lorsque je redimensionne la fenêtre, le carré doit rester au milieu.

Lorsque je dessine le carré que j'utilise

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

Ensuite, je comprends que le Les propriétés x et y du square sont relatives à la position initiale du dessin. Ainsi, square.x = 0 gardera le carré au milieu.

Mais alors, comment réinitialiser le centre de la fenêtre (et donc la position du carré) lorsque je la redimensionne?

javascript pixi.js

0 commentaires

3 Réponses :

1
votes

Cela peut être votre solution. Ceci est une réponse de redimensionnement diamétral.

J'utilise quelque chose comme:

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

canvas {
  display:block;
}

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

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

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

1 commentaires

Oh donc vous ne dessinez pas directement votre Rect à la position attendue [window.innerWidth / 2, window.innerHeight / 2], vous le dessinez relativement à [0,0], et alors seulement vous le positionnez. Je l'ai Merci!

0
votes

J'ai travaillé 6 mois avec PIXI. Pixi est la bibliothèque la plus rapide pour le rendu 2D avec le rappel de Canvas.

Pixi crée son propre élément Canvas avec des dimensions fixes. Ce n'est pas comme CSS avec un style dynamique. Si vous voulez que quelque chose se produise lors du redimensionnement de la fenêtre, vous devez ajouter un rappel d'événement window.addEventListener ('onresize'

Il existe plusieurs réponses Stack Overflow sur la façon de redimensionner la fenêtre avec PIXI.

Redimensionnez dynamiquement le scène pixi et son contenu lors du redimensionnement et du chargement de la fenêtre

0 commentaires

0
votes

J'ai créé une échelle adaptative pour réutiliser les besoins de redimensionnement courants pour plusieurs projets

0 commentaires