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

但是我可以看到 Canvas 正在渲染，但不是圆形，我不明白为什么..有什么建议吗？

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