linecode/weapp-pixi-adapter

微信小游戏pixi.js适配器

weapp-adapter for pixi.js

编译

npm install

npm run build

主要改动

输出TouchEvent

官方的adapter并没有把TouchEvent绑定到window，改动也很简单。首先，修改src/EventIniter/TouchEvent.js把默认的TouchEvent类输出：

export default class TouchEvent {
	...
}

随后，修改src/window.js，将其输出即可：

export TouchEvent from './EventIniter/TouchEvent'

关于点击位置映射为题

pixi.js对元素的位置映射有特殊的处理，在其

InteractionManager.prototype.mapPositionToPoint = function mapPositionToPoint(point, x, y) {
        var rect = void 0;

        // IE 11 fix
        if (!this.interactionDOMElement.parentElement) {
            rect = { x: 0, y: 0, width: 0, height: 0 };
        } else {
            rect = this.interactionDOMElement.getBoundingClientRect();
        }

        var resolutionMultiplier = navigator.isCocoonJS ? this.resolution : 1.0 / this.resolution;

        point.x = (x - rect.left) * (this.interactionDOMElement.width / rect.width) * resolutionMultiplier;
        point.y = (y - rect.top) * (this.interactionDOMElement.height / rect.height) * resolutionMultiplier;
    };

会对interactionDOMElement的parentElement进行检测，这里的interactionDOMElement元素就是weapp-adapter输出的canvas元素，显然其parentElement元素总是为空的，因此，上述函数总是返回空的区域，为了解决这个问题，有两种方法，一种就是直接覆盖这个函数自己想法重新映射：

PIXI.interaction.InteractionManager.prototype.mapPositionToPoint = (point, x, y) => {
    point.x = x * pixelRatio
    point.y = y * pixelRatio
}

或者

app.renderer.plugins.interaction.mapPositionToPoint = (point, x, y) => {
    point.x = x * pixelRatio
    point.y = y * pixelRatio
}

另外一种就是修改weapp-adapter的canvas对象，将其parentElement设置为true。在src/Canvas.js文件中，增加：

// pixi.js mapPositionToPoint hack
  canvas.__proto__.parentElement = true

这里采用第二种方式。

ajax相关问题

PIXI.loader与ajax相关的问题，在src/XMLHttpRequest.js中增加：

addEventListener(ev, cb) {
  this[`on${ev}`] = cb
}