整合pixijs - 打字稿在离子2 NPM

NPM安装-g离子
离子开始pixiApp空白--v2
CD pixiApp
NPM安装
NPM安装pixi.js --save （版本4.1.0）
NPM安装--save @类型/ pixi.js （我知道这是高清类型V3 :(）
我取代pixiApp的内容\ node_modules \ @types \ pixi.js \ index.d.ts通过https://github.com/pixijs/pixi-typescript/blob/v4.x/pixi.js.d.ts
在默认home.ts关的应用程序，我添加以下代码：

import { Component } from '@angular/core'; 
 
import { NavController } from 'ionic-angular'; 
 
import * as PIXI from 'pixi.js'; 
 

 
@Component({ 
 
    selector: 'page-home', 
 
    templateUrl: 'home.html' 
 
}) 
 
export class HomePage { 
 
    constructor(public navCtrl: NavController) {} 
 

 
    ngOnInit() { 
 
    PIXI.autoDetectRenderer(800, 600, {backgroundColor: 0x1099bb}); 
 
    } 
 
}

最后，我启动了命令的应用程序：离子服务

个

结果KO

[16时56分52秒]汇总：导出 'autoDetectRenderer' 不被定义的 'd：\实验室\ ionic2 \ pixiApp的\ src \网页\家\ home.ts'

我尝试了许多变种只有失败:(:(

你能帮我吗？

致以问候

来源

2016-10-21 lilumat

这基本上从一开始就适用于我。我完全按照您所描述的方式设置了一个新的空白离子项目并安装了pixi.js包和类型。我按照您所描述的方式进行了导入。

这里是我的源文件的 “家” 网页：

home.ts

import { Component, ViewChild, ElementRef } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import * as PIXI from 'pixi.js'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    @ViewChild("pixi") 
    public pixiContainer: ElementRef; 
    private pixi:PIXI.Application; 

    constructor(public navCtrl: NavController) { } 

    ionViewDidEnter() { 
    this.pixi = new PIXI.Application(640,480,{backgroundColor:0x112266}); 
    let aspectRatio = (this.pixi.renderer.height/this.pixi.renderer.width); 
    this.pixi.view.style.width = "100%"; 
    this.pixi.view.style.height = `${aspectRatio*100}%`; 
    this.pixiContainer.nativeElement.appendChild(this.pixi.view); 
    } 
}

home.scss

page-home { 
    .pixiContainer { 
     width: 100%; 
     height: 100%; 
     display: block; 
    } 
}

home.html的

<ion-header> 
    <ion-navbar> 
    <ion-title> 
     Ionic Blank 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <div #pixi class="pixiContainer"> 
    </div> 
</ion-content>

而且，它工作。我有一个深蓝色pixijs画布。

这是我的离子电流版本信息（因为事情变化快）：

cli packages: (/usr/local/lib/node_modules) 

    @ionic/cli-utils : 1.9.2 
    ionic (Ionic CLI) : 3.9.2 

local packages: 

    @ionic/app-scripts : 2.1.3 
    Ionic Framework : ionic-angular 3.6.0 

System: 

    Node : v7.10.0 
    npm : 4.2.0 
    OS : macOS Sierra

希望这有助于！

来源

2017-08-23 17:41:30 Nimai

整合pixijs - 打字稿在离子2 NPM

回答

相关问题