使用phantom-limb 模拟Touch 事件
1
下载 phantom-limb.js
2.
使用
2.1
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="../touch/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="../touch/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
<script src="../phantom-limb/phantom-limb.js" type="text/javascript"></script>
</html>
注意phantom-limb位置.
2.2
app.js
/**
* @example miniphone
*/
Ext.application({
name: 'App',
launch: function() {
Ext.create('Ext.Panel', {
fullscreen: true,
html: '<div id="canvasCt"><canvas id="canvas" width="600" height="600" style="border: 1px solid #F00" /></div>'
});
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测试通过.
