Angular18与Pixi.js开发HelloWorld：页面空白无法显示HELLO文本

问题描述 #

尝试用Pixi.js和Angular 18开发简单应用，编译正常但页面空白，看不到预期的HELLO文本，代码如下：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
 // app!: PIXI.Application;
  title = 'game';

  constructor() {}

  ngOnInit(): void {
    const app = new PIXI.Application();
    let type = "WebGL";
      if (!PIXI.isWebGLSupported()) {
        type = "canvas";
      }

//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.canvas);
PIXI.sayHello('HELLO');
}}

排查与解决 #

1. 对PIXI.sayHello的功能误解 #

PIXI.sayHello()不会在页面画布上渲染文本，它仅在浏览器的控制台打印信息。要在页面看到可视化文本，必须创建PIXI的文本对象并添加到舞台中。

2. 画布挂载方式不符合Angular规范 #

直接调用document.body.appendChild(app.canvas)绕过了Angular的DOM管理机制，可能导致画布被Angular模板渲染覆盖，或因层级、样式问题无法被看到。正确做法是将画布挂载到组件模板内的指定元素中。

修正后的代码示例 #

组件模板（app.component.html）

添加一个容器用于挂载Pixi画布：

<div #pixiContainer></div>

组件类（app.component.ts）

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as PIXI from 'pixi.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  @ViewChild('pixiContainer') pixiContainer!: ElementRef<HTMLDivElement>;
  app!: PIXI.Application;
  title = 'game';

  constructor() {}

  ngOnInit(): void {
    // 初始化PIXI应用，指定画布尺寸
    this.app = new PIXI.Application({ width: 800, height: 600 });
    
    // 将画布挂载到组件内的容器，而非直接添加到body
    this.pixiContainer.nativeElement.appendChild(this.app.canvas);

    // 创建文本对象并配置样式
    const text = new PIXI.Text('HELLO', {
      fontSize: 48,
      fill: 0xffffff,
      align: 'center'
    });
    // 将文本居中放置
    text.x = this.app.screen.width / 2 - text.width / 2;
    text.y = this.app.screen.height / 2 - text.height / 2;
    // 将文本添加到PIXI舞台
    this.app.stage.addChild(text);
  }
}

额外优化建议 #

• 给画布设置背景色，避免和页面背景色一致导致无法识别：

div[pixiContainer] canvas {
  background-color: #1a1a1a;
}

• 若使用Angular 18的独立组件模式，需确保ViewChild等装饰器已正确导入。

内容的提问来源于stack exchange，提问作者Anna Korotkova