npm install
npm run build
官方的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
这里采用第二种方式。
PIXI.loader
与ajax
相关的问题,在src/XMLHttpRequest.js
中增加:
addEventListener(ev, cb) {
this[`on${ev}`] = cb
}