Javascript 使用Pixi.js v4和Typerscript(IONIC 2)绘制圆
我正在尝试编写一个使用PIXI.js绘制圆的类 这是我的家Javascript 使用Pixi.js v4和Typerscript(IONIC 2)绘制圆,javascript,angular,typescript,ionic2,Javascript,Angular,Typescript,Ionic2,我正在尝试编写一个使用PIXI.js绘制圆的类 这是我的家 import { Component, ViewChild, ElementRef } from '@angular/core'; import { NavController } from 'ionic-angular'; import { CanvasAnimations } from '../../canvas/Canvas' @Component({ selector: 'page-home', templateUrl
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();
}
}
这是我的拉票课
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);
}
}
然而,我可以看到画布被渲染,但不是一个圆,我不明白为什么。。有什么建议吗 过了一段时间,我自己解决了这个问题。代码很好。但是我忘了使用
渲染器
方法来绘制圆
因此,我将呈现程序
从方法中移开,并将其转换为类实例属性,现在一切正常
这是代码
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);
}
}