如何在角组件中动态调整Pixijs(HTML)画布大小

Question

我已经写了一个角度，该组件创建和渲染（渲染一次）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帆布，但是它以设定的高度和宽度（从存根辅助辅助功能返回）。

。

我想做的是两个方面：

1. 在页面加载上，创建Pixi帆布，以使其大小等于其父容器的大小。类似于CSS {height: 100%; width: 100%}会做的。
2. 在窗口大小上，Pixi帆布在其余的网页上动态调整大小，例如CSS Flex Box会做的事情。

我最初的想法是使用这两个存根函数getParentDivHeight和getParentDivWidth来处理第一个问题，但是我找不到一种角度的方法。我认为我可能可以使用jQuery？

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

我该如何解决这个问题？

另外，这是上述组件的HTML和CSS代码，以防万一：

<div id="pixi-canvas-container">
</div>
#pixi-canvas-container {
    height: 100%;
    width: 100%;
}

编辑：

经过一番研究后，观看窗口尺寸的自定义指令似乎可以解决问题。我需要编写自定义指令以某种方式调整Pixi帆布的大小吗？问题的问题是，（在运行时）创建了指令时，该指令将需要附加到Pixi帆布上。

可能是不可能的。

edit2：

好吧，我已经设法使用jQuery解决了问题1。我继续编辑了我的代码以反映这一点。问题2仍然保留，因为Pixi帆布没有响应页面大小或分辨率更改。

Answer 1

解决了第一个问题已经做了什么似乎现在正常工作了，所以我在这里无法解决。

解决问题的最佳方法是将方法附加到Angular的window:resize事件上。此方法将重新计算帆布的母体包含的大小，然后调整大小 - 您可以使用Pixi内置的.resize()方法。

这是您需要的代码：

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

和HTML模板中：

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

Easy！