我有這個孩子畫應用程序,它使用鼠標事件在圖像上繪畫。不過,我需要轉換鼠標事件來觸摸,以便它可以在ipad上工作。請有人解釋我如何做到這一點。我的應用程序代碼與此示例代碼http://cool-php-tutorials.blogspot.co.uk/2011/05/simple-html5-drawing-app-with-saving.html非常相似。鼠標事件觸摸事件的iPad兼容性
P.S我關於JavaScript的知識是不是在一個先進水平,所以請你能不能告訴我的工作代碼或例子將是一個很大的幫助
我的代碼,做鼠標事件如下。請從鼠標轉換此功能觸摸..請我從現在2天卡住..:|
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();
}
}
請參閱http://stackoverflow.com/questions/1517924/javascript-mapping-touch-events-to-mouse-events –