开发小程序时一些特殊场景需要使用canvas,但canvas渲染一些特效时太过耗费性能造成页面卡顿并且展示效果也不好(拖动卡顿不连贯等),因此使用渲染引擎来满足需求。本文在小程序中使用 pixi 渲染引擎。
引入改造后的 pixi
pixi与小程序不是很匹配,需要进行对应改造才可在小程序中使用。
本文中使用spine、animate等,可保存至同一文件夹下
-
pixi-animate.js
-
pixi-spine.js
-
pixi.miniprogram.js
-
unsafeEval.js(必备,牵连到一些事件转换)
使用
页面中添加 canvas
<canvas type="webgl" id="croplandCanvas" class="cropland_canvas" bindtouchstart="touchEvent" bindtouchmove="touchEvent" bindtouchend="touchEvent" bindtouchcancel="touchEvent"></canvas>
<canvas type="2d" id="canvas2d" class="canvas_test"></canvas>
<canvas type="2d" id="canvas2dText" class="canvas_test"></canvas>
特效实现
初始定义
/** pixi 相关 */
import {
createPIXI
} from "../libs/pixi.miniprogram";
const unsafeEval = require(