I've written an angular ponent which creates and renders (renders a single time) a Pixi canvas.

Here is the ponent (excuse the bad name I'm still new to angular):

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

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

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

  constructor() { }

  ngOnInit() {
    this.generatePixiCanvas();
    console.log("pixi ponent 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;
  }
}

You can see that this ponent creates the pixi canvas within the ngOnInit function, but it creates it with a set height and width (returned from the stub helper functions).

What I want to do is two-fold:

1. On page load, create the pixi canvas so that it's size is EQUAL to the size of its parent container. Similar to what CSS {height: 100%; width: 100%} would do.
2. On window resize, the pixi canvas dynamically resizes with the rest of the webpage, like what a CSS flex box would do.

My original idea was to use those two stub functions getParentDivHeight and getParentDivWidth to deal with the first problem, but I was unable to find an angular-y way of doing this. I think I might be able to use JQuery?

As for the second problem, I'm not sure how to get an angular ponent to listen to window resize events.

How can I solve this problem?

Also, here's the HTML and CSS code for the above ponent, in case it helps:

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

</div>

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

EDIT:

After a little bit of research, it seems that a custom directive to watch window resizes could do the trick. Would I need to write a custom directive to somehow resize the pixi canvas? The problem with this would be that the directive would need to be attached to the pixi canvas when it is created (at runtime) which may not be possible with angular.

EDIT2:

Okay, I've managed to solve problem 1 using JQuery. I've gone ahead and edited my code to reflect this. Problem 2 still remains as the pixi canvas does not respond to page resizes or resolution changes.

I've written an angular ponent which creates and renders (renders a single time) a Pixi canvas.

Here is the ponent (excuse the bad name I'm still new to angular):

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

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

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

  constructor() { }

  ngOnInit() {
    this.generatePixiCanvas();
    console.log("pixi ponent 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;
  }
}

You can see that this ponent creates the pixi canvas within the ngOnInit function, but it creates it with a set height and width (returned from the stub helper functions).

What I want to do is two-fold:

1. On page load, create the pixi canvas so that it's size is EQUAL to the size of its parent container. Similar to what CSS {height: 100%; width: 100%} would do.
2. On window resize, the pixi canvas dynamically resizes with the rest of the webpage, like what a CSS flex box would do.

My original idea was to use those two stub functions getParentDivHeight and getParentDivWidth to deal with the first problem, but I was unable to find an angular-y way of doing this. I think I might be able to use JQuery?

As for the second problem, I'm not sure how to get an angular ponent to listen to window resize events.

How can I solve this problem?

Also, here's the HTML and CSS code for the above ponent, in case it helps:

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

</div>

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

EDIT:

After a little bit of research, it seems that a custom directive to watch window resizes could do the trick. Would I need to write a custom directive to somehow resize the pixi canvas? The problem with this would be that the directive would need to be attached to the pixi canvas when it is created (at runtime) which may not be possible with angular.

EDIT2:

Okay, I've managed to solve problem 1 using JQuery. I've gone ahead and edited my code to reflect this. Problem 2 still remains as the pixi canvas does not respond to page resizes or resolution changes.

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

Share Improve this question Follow edited Dec 6, 2016 at 3:52 JavascriptLoser asked Dec 6, 2016 at 0:45 JavascriptLoserJavascriptLoser 1,96266 gold badges3737 silver badges6767 bronze badges 1

• What was your final solution? – Josh C. Commented Aug 30, 2017 at 3:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

What has been done to solve the first problem seems to be working fine for now, so I won't address that here.

The best way to solve problem two is to attach a method to angular's window:resize event. This method will recalculate the size of the canvas' parent contain and then resize it - you can use pixi's built in .resize() method.

Here's the code you'll need:

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

And in the HTML template:

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

</div>

Easy!