angular - 带有 Pixi 6 的 Angular 12+ 未正确初始化
问题描述
目前正试图让 Pixi.js 6 以 angular 12 运行(但 11 似乎确实面临同样的问题)。
如果我尝试通过 pixi 使用画布初始化组件并添加精灵,我确实遇到了 Pixi 如何初始化它的基类的问题。
错误类型错误:无法读取 BatchSystem.setObjectRenderer 处未定义的属性“开始”(BatchSystem.ts:56)
import { AfterViewInit, Component, ElementRef, NgZone } from "@angular/core";
import { Application } from "@pixi/app";
import { Sprite } from "@pixi/sprite";
@Component({
selector: "hello",
template: `
<h1>game</h1>
`,
styles: [
`
h1 {
font-family: Lato;
}
`
]
})
export class HelloComponent implements AfterViewInit {
constructor(public elRef: ElementRef, private zone: NgZone) {
// The application will create a canvas element for you that you
// can then insert into the DOM.
}
public ngAfterViewInit(): void {
this.zone.runOutsideAngular(
(): void => {
const app: Application = new Application({
//view: this.myCanvas.nativeElement,
});
this.elRef.nativeElement.appendChild(app.view);
console.log("Plugins", app.renderer.plugins);
const sprite: Sprite = Sprite.from(
"https://avatars.githubusercontent.com/in/2740?s=64&v=4"
);
app.stage.addChild(sprite);
app.render();
}
);
}
}
根据文档,默认行为应该是预填充的插件很少。但是,如果确实检查了那些未设置的内容(请参阅下面的控制台示例),则会产生上述错误。
解决问题: https ://stackblitz.com/edit/angular-zvqwsh ?file=src/app/hello.component.ts
如果我在简单的设置中使用相同的 pixi 版本,它确实可以正常工作。所以我的猜测是 Angulars 捆绑导致了这个问题,但我不知道是怎么回事。因为代码清楚地存在于 ESM 包中。
解决方案
当我尝试调试它时,插件注册在 中node_modules/pixijs/dist/esm/pixi.js
,因为角度项目没有导入它,所以插件没有正确注册。我已经添加了这个:
import * as PIXI from 'pixi.js';
在文件顶部并添加到以下行以避免摇晃以pixi.js
从最终捆绑中删除
console.log(PIXI.VERSION);
工作版本:https ://stackblitz.com/edit/angular-2cwx4k?file=src/app/hello.component.ts
推荐阅读
- angular - createSelector 函数可以获取到 9 个参数
- javascript - 生成 m 个等于 100 但两个数字之间的差必须大于 4 的数字
- python - 使用带有生成器输入的并发期货
- robotframework - Robotframework 字符串运算符 IN
- python - 根据字符数限制字符串中单词的最佳方法是什么
- node.js - 无法在 Node.js node-oracledb 模块中绑定
- reactjs - 使用 redux 做出反应的多语言
- c# - 日期直方图聚合返回空桶
- c# - ASP.NET Core 中的级联选择
- php - 如何将 eloquent 对象转换为零深度数组?