Интеграция pixijs - машинопись в Ionic 2 с npm

Question

• npm install -g ionic
• Пустой ионный запуск pixiApp --v2
• cd pixiApp
• установка npm
• npm install pixi.js --save (версия 4.1.0)
• Установка npm --save @ types / pixi.js (я знаю, что это типы def для 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 off по умолчанию я добавил этот код:

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

• и наконец, я запустил приложение с командой: ionic serve

Результаты КО

[16:56:52] rollup: Экспорт 'autoDetectRenderer' не определен как 'D:\labs\ionic2\pixiApp\src\pages\home\home.ts'

Я перепробовал много вариантов только с неудачами:(:(

Вы можете мне помочь?

С наилучшими пожеланиями

Answer 1

Это в основном с самого начала работало для меня. Я сделал именно так, как вы описали, чтобы создать новый пустой ионный проект и установить пакет и типы 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>

И это сработало. У меня есть темно-синий холст.

Это информация о моей текущей версии для ionic (поскольку все быстро меняется):

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

Надеюсь это поможет!