Pixi.js v4とTyperscript（IONIC 2）を使用して円を描く

Question

PIXI.jsを使用して円を描画するクラスを作成しようとしています。

これは私のhome.tsクラス

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

と私はキャンバスがレンダリングではなく、円と、私は理由を理解していないされて見ることができますしかし、これは私のCanvasAnimationsクラス

import { ElementRef } from '@angular/core'; 
import * as PIXI from 'pixi.js'; 

export class CanvasAnimations { 

    // Class Properties 
    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); 
    } 
} 

です.. 助言がありますか？

Answer 1

しばらくして、私は自分自身でこれを把握しています。コードは問題ありません。しかし、私は円を描くようにrendererメソッドを使用することを忘れていました。

私はメソッドから離れてrendererを移動し、それをクラスインスタンスプロパティにして、今はすべて正常です。

ここにコードがあります。

export class canvasGenerator { 

    canvasStage; 
    renderer; 

    constructor() {} 

    createCanvas(anchorElement) { 
     //Create the renderer 

     this.renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, {antialias: true, backgroundColor: 0xececec, resolution: 1}); 
     this.renderer.view.style.position = "absolute"; 
     this.renderer.view.style.display = "block"; 

     //Add the canvas to the HTML document 
     anchorElement.appendChild(this.renderer.view); 
     this.canvasStage = new PIXI.Container(); 

     //Tell the `renderer` to `render` the `stage` 
     this.renderer.render(this.canvasStage); 

     this.generateCircle(); 
    } 

    generateCircle() { 
     var circle = new PIXI.Graphics(); 
     circle.beginFill(0x9966FF); 
     circle.drawCircle(0, 0, 32); 
     circle.endFill(); 
     circle.x = 64; 
     circle.y = 130; 
     this.canvasStage.addChild(circle); 
     this.renderer.render(this.canvasStage); 
    } 
}