最近做了个app，上线google play不大顺利，说是有假冒行为，然后改了下icon和名字以及描述，但是没啥信息去上，于是暂时放下搞点别的。
因为近期看到个比较有趣的绘图创意，
于是想通过ionic整合pixi来实现，
整合途径来自这里：
为啥是pixi呢？因为pixi目前来讲是地球上效率最好的js 2d渲染框架。
基于pixi的游戏框架phaser更是霸气十足。
以下是在ionic中使用pixi的步骤：
1. 新建ionic项目
2. 进入项目运行npm install --save pixi.js：添加pixi包
3. 运行npm install --save @types/pixi.js：添加typescript包
就这样pixi就在你的项目中可以使用了。
到任意一个page里面，加入一些代码以确保pixi是否可以正常运行，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(‘content‘) content:ElementRef;
constructor(public navCtrl: NavController) {
console.log(window.innerWidth,window.innerHeight);
}
ionViewDidLoad(){
var type = "WEBGL";
if(!PIXI.utils.isWebGLSupported){
type = "canvas";
}
PIXI.utils.sayHello(type);
var app = new PIXI.Application(window.innerWidth, window.innerHeight,{backgroundColor:0x1099bb});
this.content.nativeElement.appendChild(app.view);
let bg = new PIXI.Graphics();
bg.beginFill(0xcccccc,0.6);
bg.drawRect(0,0,window.innerWidth, window.innerHeight);
bg.endFill();
bg.interactive = true;
app.stage.addChild(bg);
bg.on(‘pointerdown‘,onClick);
bg.on(‘pointermove‘,onMove);
function onClick(evt){
console.log(‘on touched...‘,evt);
}
function onMove(evt){
var pos = evt.data.getLocalPosition(this.parent);
bg.beginFill(Math.random()*0xffffff,1);
bg.drawCircle(pos.x, pos.y,5);
bg.endFill();
console.log(‘on move...‘);
}
}
}
模板文件.html中修改为如下：
<ion-content> <div #content style="width:100%" ></div> </ion-content>
#content 可以让它在ts中以ViewChild方式找到。
这里是一个简单的拖动绘制随机颜色圆的demo。
效果图如下：
原文：http://www.cnblogs.com/adoontheway/p/7085601.html