I have been attempting to create a custom class in TypeScript that utilizes PIXI.js to draw circles.
Below is the code for my home.ts class:
import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { CanvasAnimations } from '../../canvas/Canvas'
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
canvas = new CanvasAnimations();
@ViewChild('canvasWrapper') MyCanvas:ElementRef;
@ViewChild('homeContent') HomeContent:ElementRef;
constructor(public navCtrl: NavController) {}
ionViewDidLoad() {
this.canvas.setCanvas(this.MyCanvas, window.innerWidth, window.innerHeight);
this.canvas.generateCircle();
}
}
Here is my CanvasAnimations class:
import { ElementRef } from '@angular/core';
import * as PIXI from 'pixi.js';
export class CanvasAnimations {
stage = new PIXI.Container();
constructor() { }
setCanvas(canvasElement: ElementRef, windowWidth: number, windowHeight: number) {
var renderer = PIXI.autoDetectRenderer(windowWidth, windowHeight, { backgroundColor: 0x00FF00, antialias: true });
canvasElement.nativeElement.appendChild(renderer.view);
renderer.render(this.stage);
}
generateCircle() {
var circle = new PIXI.Graphics();
circle.beginFill(0x000000);
circle.drawCircle(0, 0, 100);
circle.endFill();
circle.x = 100;
circle.y = 130;
this.stage.addChild(circle);
}
}
Despite successfully rendering the canvas, I am unable to see the circle and unsure of what may be causing this issue. Any advice or suggestions would be greatly appreciated.