整合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

回答

相關問題