首页 > 代码库 > Ionic 整合 pixi.js

Ionic 整合 pixi.js

2024-10-12 19:50:39   214人阅读

最近做了个app，上线google play不大顺利，说是有假冒行为，然后改了下icon和名字以及描述，但是没啥信息去上，于是暂时放下搞点别的。

 

因为近期看到个比较有趣的绘图创意，

于是想通过ionic整合pixi来实现，

整合途径来自这里：

Integrate pixijs - typescript in Ionic 2 with npm

为啥是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。

效果图如下：

技术分享

 

Ionic 整合 pixi.js


联系
我们