如何在角度组件中动态调整 PixiJS (HTML) 画布的大小答案

【问题标题】：How to dynamically resize a PixiJS (HTML) canvas within angular component如何在角度组件中动态调整 PixiJS (HTML) 画布的大小
【发布时间】：2017-04-20 12:53:09
【问题描述】：

我编写了一个 Angular 组件，它创建和渲染（一次渲染）Pixi 画布。

这是组件（请原谅我对 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 画布，但它使用设置的高度和宽度（从存根辅助函数返回）创建它。

我想做的是两方面的：

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

我最初的想法是使用这两个存根函数getParentDivHeight 和getParentDivWidth 来处理第一个问题，但我无法找到一个角度-y 的方法来做到这一点。我想我也许可以使用 JQuery？

至于第二个问题，我不确定如何让一个角度组件来监听窗口调整大小事件。

我该如何解决这个问题？

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

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

</div>

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

编辑：

经过一些研究，似乎可以使用自定义指令来监视窗口调整大小。我是否需要编写一个自定义指令来以某种方式调整 pixi 画布的大小？这样做的问题是指令需要在创建时（在运行时）附加到 pixi 画布上，而 angular 可能无法做到这一点。

EDIT2：

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

【问题讨论】：

你的最终解决方案是什么？

标签： javascript angularjs angular html5-canvas pixi.js

【解决方案1】：

为解决第一个问题所做的工作目前似乎运行良好，所以我不会在这里讨论。

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

这是您需要的代码：

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

在 HTML 模板中：

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

</div>

简单！

【讨论】：

【解决方案2】：

您想试试render.autosize 属性吗？

来源： Github source

行：61

【讨论】：