Как динамически изменять размер холста PixiJS (HTML) в угловом компоненте

Я написал угловой компонент, который создает и отображает (делает один раз) холст Pixi.

Вот компонент (извините плохое имя, которое я все еще новичок в угловом):

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;
  }
}

Вы можете видеть, что этот компонент создает элемент pixi внутри функции ngOnInit, но он создает его с заданной высотой и шириной (возвращается из вспомогательных вспомогательных функций).

Я хочу сделать два раза:

  1. При загрузке страницы создайте холст pixi, чтобы размер EQUAL был равен размеру его родительского контейнера. Как и CSS {height: 100%; width: 100%}.
  2. При изменении размера окна холст pixi динамически изменяет размер с остальной частью веб-страницы, например, что делает поле flex flex.

Моя первоначальная идея состояла в том, чтобы использовать эти две функции заглушки getParentDivHeightи getParentDivWidthразобраться с первой проблемой, но мне не удалось найти способ угловатого. Я думаю, что я могу использовать JQuery?

Что касается второй проблемы, я не уверен, как получить угловой компонент для прослушивания событий изменения размера окна.

Как я могу решить эту проблему?

Кроме того, здесь приведен код HTML и CSS для вышеуказанного компонента, если он помогает:

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

</div>

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

РЕДАКТИРОВАТЬ:

После небольшого исследования, похоже, что пользовательская директива для просмотра размеров окна может сделать трюк. Нужно ли мне написать пользовательскую директиву, чтобы каким-то образом изменить размер холста pixi? Проблема с этим заключалась бы в том, что директива должна быть привязана к холсту pixi, когда он создается (во время выполнения), что может быть невозможно с угловым.

Edit2:

Хорошо, мне удалось решить проблему 1 с помощью JQuery. Я пошел дальше и отредактировал свой код, чтобы отразить это. Проблема 2 по-прежнему сохраняется, поскольку холст pixi не отвечает на изменение размера страницы или изменение разрешения.

javascript,angularjs,angular,html5-canvas,pixi.js,

0

Ответов: 2


3 принят

То, что было сделано для решения первой проблемы, похоже, сейчас работает нормально, поэтому я не буду рассматривать это здесь.

Лучший способ решить вторую проблему - присоединить метод к window:resizeсобытию углового . Этот метод будет пересчитывать размер родительского содержимого холста, а затем изменять его размер - вы можете использовать встроенный .resize()метод pixi .

Вот код, который вам нужен:

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

И в шаблоне HTML:

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

</div>

Легко!


-1

Вы хотите попробовать render.autosizeнедвижимость?

Источник: источник Github

Линия: 61

JavaScript, angularjs, угловой, html5-холст, pixi.js,
Похожие вопросы