java模拟滑动事件_使用phantom-limb 模拟Touch 事件

1

下载 phantom-limb.js

2.

使用

2.1

index.html

Hello World

注意phantom-limb位置.

2.2

app.js

/**

* @example miniphone

*/

Ext.application({

name: 'App',

launch: function() {

Ext.create('Ext.Panel', {

fullscreen: true,

html: '

});

var canvas = Ext.get('canvas');

var context = canvas.dom.getContext('2d');

context.lineWidth = 4;

var drawer = {

isDrawing : false,

touchstart : function(e) {

e.preventDefault();

var coors = {

x : e.targetTouches[0].pageX,

y : e.targetTouches[0].pageY

};

context.beginPath();

context.moveTo(coors.x, coors.y);

this.isDrawing = true;

}

,

touchmove : function(e) {

var coors = {

x : e.targetTouches[0].pageX,

y : e.targetTouches[0].pageY

};

if (this.isDrawing) {

context.lineTo(coors.x, coors.y);

context.stroke();

}

}

,

touchend : function(e) {

if (this.isDrawing) {

this.isDrawing = false;

}

}

}

// 在这里可以直接监听touch事件了.

canvas.dom.addEventListener('touchstart', drawer.touchstart, false);

canvas.dom.addEventListener('touchmove', drawer.touchmove, false);

canvas.dom.addEventListener('touchend', drawer.touchend, false);

}

});

3

测试

3.1

测试结果在Canvas上可以正常写字,表示通过.

在Chrome测试通过.

ITeye推荐