PIXI.js粒子聚集在角落。无法解决

Question

所以，我试图在Angular 9中使用PIXI.js创建一个粒子网。这是我要注入根目录的服务：

import { Injectable } from '@angular/core';
import * as PIXI from 'pixi.js'

class Particle {
  x: number;
  y: number;
  xDirection: number;
  yDirection: number;
  radius: number;
  graphicCorespondent: PIXI.Graphics;
  
  constructor(){
    this.x = Math.random() * window.innerWidth;
    this.y = Math.random() * window.innerHeight;
    this.xDirection = Math.random();
    this.xDirection *= Math.ceil(Math.random()*2) == 2 ? 1 : -1;
    this.yDirection = Math.random();
    this.yDirection *= Math.ceil(Math.random()*2) == 2 ? 1 : -1;
    // this.xDirection = 1;
    // this.yDirection = 1;
    this.radius = 1 + Math.random() * 3;
  }
}

@Injectable({
  providedIn: 'root'
})

export class ParticlesService {
  app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight});
  density = 3000;
  particles = [];
  velocity = 1;

  constructor() {
    window.onload = () => {
      document.body.appendChild(this.app.view);
      this.app.renderer.backgroundColor = 0xFFFFFF;
      this.app.renderer.view.style.position = "fixed";
      this.app.renderer.view.style.display = "block";
      this.app.renderer.view.style.left = '0';
      this.app.renderer.view.style.top = '0';
      this.app.renderer.view.style.zIndex = '-1';
      // window.onresize = () => {
      //   this.app.renderer.resize(window.innerWidth, window.innerHeight)
      // }
    }
  }

  init(){
    for(let i=0; i<this.density; i++){
      const particle = new Particle();
      const gr = new PIXI.Graphics();
      gr.beginFill(0x000000);
      gr.drawCircle(particle.x, particle.y, particle.radius);
      gr.endFill();

      particle.graphicCorespondent = gr;
      this.particles.push(particle)

      this.app.stage.addChild(gr)
    }
    this.app.ticker.add((delta) => {
      this.animate(delta);
    });
    this.app.ticker.start();
  }

  animate(delta){
    this.particles.forEach((particle, index) => {
      
      if(particle.x > window.innerWidth) particle.x = 0;  
      if(particle.y > window.innerHeight) particle.y = 0;  
      if(particle.x < 0) particle.x = window.innerWidth;  
      if(particle.y < 0) particle.y = window.innerHeight; 

      particle.graphicCorespondent.x = particle.x + delta * particle.xDirection;
      particle.graphicCorespondent.y = particle.y + delta * particle.yDirection;

      particle.x = particle.graphicCorespondent.x;
      particle.y = particle.graphicCorespondent.y;
      
    })
    this.app.render()
  }
}

我设法做到了这一点，它起作用了...。但是每次粒子都倾向于在右下角结块。

如果删除“边缘碰撞检测”：

if(particle.x > window.innerWidth) particle.x = 0;  
if(particle.y > window.innerHeight) particle.y = 0;  
if(particle.x < 0) particle.x = window.innerWidth;  
if(particle.y < 0) particle.y = window.innerHeight; 

似乎工作正常，但粒子将飞向无限远。否则，它们往往会聚集在右下角，而我不明白为什么。

Screenshot of the clumping

我在这一天浪费了一整天，但我仍然不知道为什么要这么做。我使用CLI创建了一个新的Angular应用程序，而我创建的唯一一件事就是该服务。结果相同。

<meta name="viewport" content="width=device-width, initial-scale=1">存在。

重新缩放似乎可行。

宽度和高度是核心。

Particle.x和particle.graphicCorespondent.x在刻度线的末尾相等。

而且，在大多数情况下，粒子似乎在消失之前就消失并重新出现。

[如果有人可以看一看，我将非常感激。它使我发疯。

我尝试将粒子切出屏幕，然后创建另一个。它创建了另一个，但之后似乎是静态的。

我尝试直接通过stage.children循环，结果相同。

[还尝试通过访问particle.graphicCorespondent上的getBounds（）方法来读取粒子的x和y值。相同的值，不相关。

编辑：在Chrome和Firefox中，我得到相同的结果。

PIXI.js版本：5.2.3

Angular版本：9.1.1

Answer 1

您的错误是您绘制子画面的方式。特别....gr.drawCircle(particle.x, particle.y, particle.radius);俗话说，在x和y处画一个这样半径的圆。 Pixi会创建一个画布以适应您的绘图，因此，如果x和y均为200，半径为10，则画布将为205像素。然后，稍后在画布上绘制精灵时，该点将与您绘制的x和y有偏移，这是由于精灵实际上是宽205高的画布上200,200处的点。所以你真正想要的是...gr.drawCircle(particle.radius / 2, particle.radius / 2, particle.radius);这是一个工作示例供您查看...。https://codesandbox.io/s/so-pixijs-particles-clumping-in-the-corner-cant-figure-it-out-tsccz?file=/index.js