javascript - 如何在 Angular 组件中动态调整 PixiJS (HTML) Canvas 的大小

Question

我编写了一个 Angular 组件，用于创建和渲染(渲染一次)Pixi Canvas 。

这是组件(请原谅这个不好的名字，我对 Angular 还是新手):

import { Component, OnInit } from '@angular/core';

declare var PIXI: any;
declare var $: any;

@Component({
  selector: 'pixi-component',
  templateUrl: './pixi-component.component.html',
  styleUrls: ['./pixi-component.component.css']
})
export class PixiComponentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    this.generatePixiCanvas();
    console.log("pixi component is created");
  }

  generatePixiCanvas() {
      //Create the canvas and add it the DOM...
      var renderer = PIXI.autoDetectRenderer(this.getParentDivWidth(), this.getParentDivHeight());
      document.getElementById('pixi-canvas-container').appendChild(renderer.view);
      renderer.autoResize = true;

      //Create a container object called the `stage` and render it...
      var stage = new PIXI.Container();
      renderer.render(stage);
  }

  getParentDivHeight() {
    return $('#pixi-canvas-container').height();
  }

  getParentDivWidth() {
    return $('#pixi-canvas-container').width() + 1;
  }
}

您可以看到该组件在 ngOnInit 函数中创建了 pixi Canvas ，但它使用设置的高度和宽度(从 stub 辅助函数返回)创建它。

我想做的有两个:

1. 页面加载时，创建 pixi Canvas ，使其大小等于其父容器的大小。类似于CSS {height: 100%; width: 100%} 就可以了。
2. 调整窗口大小时，pixi Canvas 会随着网页的其余部分动态调整大小，就像 CSS 弹性框所做的那样。

我最初的想法是使用这两个 stub 函数 getParentDivHeight 和 getParentDivWidth 来处理第一个问题，但我无法找到 Angular-y 的方法这。我想我可以使用 JQuery？

对于第二个问题，我不确定如何让 Angular 组件监听窗口大小调整事件。

如何解决这个问题？

另外，这里是上述组件的 HTML 和 CSS 代码，以防有帮助:

<div id="pixi-canvas-container">

</div>

#pixi-canvas-container {
    height: 100%;
    width: 100%;
}

编辑:

经过一些研究，似乎观察窗口大小调整的自定义指令可以解决这个问题。我是否需要编写一个自定义指令来以某种方式调整 pixi Canvas 的大小？这样做的问题是，该指令需要在创建时(在运行时)附加到 pixi Canvas ，这对于 Angular 来说可能是不可能的。

编辑2:

好的，我已经使用 JQuery 解决了问题 1。我已经继续编辑了我的代码以反射(reflect)这一点。问题 2 仍然存在，因为 pixi Canvas 不响应页面大小调整或分辨率更改。

Answer 1

解决第一个问题的方法目前看来效果很好，所以我不会在这里解决这个问题。

解决问题二的最佳方法是为 Angular 的 window:resize 事件附加一个方法。此方法将重新计算 Canvas 父容器的大小，然后调整其大小 - 您可以使用 pixi 的内置 .resize() 方法。

这是您需要的代码:

adjustCanvasSize(){
    this.renderer.resize(this.getParentDivWidth(), this.getParentDivHeight());
  }

在 HTML 模板中:

<div (window:resize)="adjustCanvasSize()" id="pixi-canvas-container">

</div>

简单!