Question

我所做的大部分工作都是基于某种形式的Canvas。我是Angular的新手，我正在学习以创建＆＃34;容器＆＃34;对于所有这些松散的实验。

一般来说，我的所有实验都是从某种根类开始的。例如。入口点可能如下所示。

CarGameApplication.ts

export class CarGameApplication extends PIXI.Application {

    constructor(canvas: HTMLCanvasElement) {

          super(canvas);

    }

}

然后我想我想在Angular中使用这个组件。

轿厢game.component.ts

export class CarGameComponent implements AfterViewInit {

   private canvas: HTMLCanvasElement;
   private demo: CarGameApplication;

   constructor(private zone: NgZone){}

   ngAfterViewInit(){

       this.canvas = this.canvasRef.nativeElement;
       this.canvas.width = ?;
       this.canvas.height = ?;

       this.zone.runOutsideAngular(() => {
             this.demo = new CarGameApplication(this.canvas)
       });

   }

}

轿厢game.component.html

 <canvas #canvasRef></canvas>

所以这就是我要去的地方，并试图省略不重要的样板。以下是我的问题：

我需要这个画布来填充组件。让我们忽略调整大小，假设它永远不会为此目的调整大小。我应该在Angular Component上使用哪些属性来获取car-game.component.ts的宽度和高度？我不想要任何类型的滚动。
如上所示，我的实验扩展了PIXI.Application。细节并不重要，但是，如何在整个应用程序中消除角度区域？在画布上捕获MouseEvents，运行requestAnimationFrame等。 Angular应该忽略这一点。你可以在上面看到我天真地试图在Angular Zone之外运行整个事情，然而，咨询开发工具，每个requestAnimationFrame标记ZoneTask.invoke。我不希望它在那里并且误解。

你能否对这两点有所了解？在跨越这两个世界时，是否有更好的方法或策略？

谢谢！

在Angular中处理游戏（HTMLCanvasElement）的最佳策略是什么？

0 个答案: