我有一个儿童绘画应用程序,使用鼠标事件在图像上绘画。然而,我需要将鼠标事件转换为触摸事件,以便它可以在iPad上运行。请问有人能够告诉我如何做到这一点吗?我的应用代码与此示例代码非常相似 http://cool-php-tutorials.blogspot.co.uk/2011/05/simple-html5-drawing-app-with-saving.html。
附注:我的JavaScript知识并不是很高级,因此如果您能向我展示工作代码或示例,那将是极大的帮助。
我的鼠标事件代码如下。请将此功能从鼠标转换为触摸...请救救我,我已经卡了两天了...:|
附注:我的JavaScript知识并不是很高级,因此如果您能向我展示工作代码或示例,那将是极大的帮助。
我的鼠标事件代码如下。请将此功能从鼠标转换为触摸...请救救我,我已经卡了两天了...:|
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
// binding events to the canvas
$('#drawingCanvas').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true; // start painting
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
// always call redraw
redraw();
});
$('#drawingCanvas').mousemove(function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
// when mouse is released, stop painting, clear the arrays with dots
$('#drawingCanvas').mouseup(function(e){
paint = false;
clickX = new Array();
clickY = new Array();
clickDrag = new Array();
});
// stop painting when dragged out of the canvas
$('#drawARobot').mouseleave(function(e){
paint = false;
});
// The function pushes to the three dot arrays
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
// this is where actual drawing happens
// we add dots to the canvas
function redraw(){
for(var i=0; i < clickX.length; i++)
{
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}