如何在 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，但它使用设置的高度和宽度（从存根辅助函数返回）创建它。

我想做的有两方面：

~~在页面加载时，创建 pixi canvas，使其大小等于其父容器的大小。类似于 CSS {height: 100%; width: 100%} 会做的事情。~~
在 window 调整大小时，pixi canvas 会随着网页的其余部分动态调整大小，就像 CSS 弹性框所做的那样。

我最初的想法是使用getParentDivHeight和getParentDivWidth这两个存根函数来处理第一个问题，但是我找不到angular-y的方法这个。我想我可以使用 JQuery?

至于第二个问题，我不确定如何让 angular 组件来监听 window 调整大小事件。

我该如何解决这个问题？

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

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

</div>

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

编辑：

经过一些研究，似乎可以使用自定义指令来观察 window 调整大小。我是否需要编写自定义指令以某种方式调整 pixi canvas 的大小？这样做的问题是指令需要在创建时（在运行时）附加到 pixi canvas，这可能无法使用 angular.

编辑 2：

好的，我已经使用 JQuery 解决了问题 1。我已经继续编辑我的代码以反映这一点。问题 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>

简单！

Answer 2

要不要试试render.autosize属性？

来源： Github source

第 61 行

如何在 angular 组件中动态调整 PixiJS (HTML) canvas 的大小

How to dynamically resize a PixiJS (HTML) canvas within angular component

javascript

html5-canvas

angularjs

pixi.js

angular