使用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); 
    } 
}