javascript - JavaScript 中的鼠标操作与触摸事件

Question

该主题可能不足以解决我的问题，对此表示抱歉，因为我不太熟悉这些术语。问题是我有一个 Canvas ，当我单击鼠标时可以在上面画东西。但是当我尝试通过触摸(即 iPhone 和其他触摸操作设备)进行操作时，它没有检测到移动，因此无法在上面画东西 Canvas ..我需要什么来检测触摸 Action ？任何想法都会很棒..

这是我的 js fiddle 链接 http://jsfiddle.net/regeme/xNSVm/

这也是绘图脚本

painting = false;
var WIDTH = 300;
var HEIGHT =300;

function clear() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
ctx.fillStyle = "white";
}

function generate(){

var newCanvas = document.createElement('canvas');
newCanvas.width = WIDTH;
newCanvas.height = HEIGHT;
document.getElementById('container').appendChild(newCanvas);
ctx = newCanvas.getContext('2d');
ctx.fillStyle = "black";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
ctx.fillStyle = "white";

newCanvas.onmousedown = function(e) {
    painting = true;
ctx = newCanvas.getContext('2d');

lastX = e.pageX - this.offsetLeft;
lastY = e.pageY - this.offsetTop;
};

newCanvas.onmouseup = function(e) {
painting = false;
};

newCanvas.onmousemove = function(e) {
if (painting) {
    mouseX = e.pageX - this.offsetLeft;
    mouseY = e.pageY - this.offsetTop;

    // find all points between        
    var x1 = mouseX,
        x2 = lastX,
        y1 = mouseY,
        y2 = lastY;


    var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
    if (steep){
        var x = x1;
        x1 = y1;
        y1 = x;

        var y = y2;
        y2 = x2;
        x2 = y;
    }
    if (x1 > x2) {
        var x = x1;
        x1 = x2;
        x2 = x;

        var y = y1;
        y1 = y2;
        y2 = y;
    }

    var dx = x2 - x1,
        dy = Math.abs(y2 - y1),
        error = 0,
        de = dy / dx,
        yStep = -1,
        y = y1;

    if (y1 < y2) {
        yStep = 1;
    }

    for (var x = x1; x < x2; x++) {
        if (steep) {
            ctx.fillRect(y, x, 1, 1);
        } else {
            ctx.fillRect(x, y, 1, 1);
        }

        error += de;
        if (error >= 0.5) {
            y += yStep;
            error -= 1.0;
        }
    }

    lastX = mouseX;
    lastY = mouseY;

        }
     };

   }

    document.getElementById('button').onclick = clear;
    document.getElementById('generate').onclick = generate;
    document.onmouseup = function(e) {
    painting = false;
    };
    generate();

Answer 1

我无法发表评论，否则我只会将此链接留在评论中。 http://jsfiddle.net/gfcarv/66nVn/

但是，由于我在这里，我可以某种(强调某种)代码中发生了什么。

这是附加触摸事件或鼠标事件的部分:

// detect touch capabilities
var touchAvailable = ('createTouch' in document) || ('ontouchstart' in window);

// attach the touchstart, touchmove, touchend event listeners.
if(touchAvailable){
    canvas.addEventListener('touchstart', draw, false);
    canvas.addEventListener('touchmove', draw, false);
    canvas.addEventListener('touchend', draw, false);        
}    
// attach the mousedown, mousemove, mouseup event listeners.
else {
    canvas.addEventListener('mousedown', draw, false);
    canvas.addEventListener('mousemove', draw, false);
    canvas.addEventListener('mouseup', draw, false);
}

这是抽屉函数，它基本上使用 switch 语句对正在发生的正确事件执行正确的计算

 // create a drawer which tracks touch movements
var drawer = {
    isDrawing: false,
    touchstart: function (coors) {
        context.beginPath();
        context.moveTo(coors.x, coors.y);
        this.isDrawing = true;
    },
    touchmove: function (coors) {
        if (this.isDrawing) {
            context.lineTo(coors.x, coors.y);
            context.stroke();
        }
    },
    touchend: function (coors) {
        if (this.isDrawing) {
            this.touchmove(coors);
            this.isDrawing = false;
        }
    }
};
// create a function to pass touch events and coordinates to drawer
function draw(event) { 
    var type = null;
    // map mouse events to touch events
    switch(event.type){
        case "mousedown":
                event.touches = [];
                event.touches[0] = { 
                    pageX: event.pageX,
                    pageY: event.pageY
                };
                type = "touchstart";                  
        break;
        case "mousemove":                
                event.touches = [];
                event.touches[0] = { 
                    pageX: event.pageX,
                    pageY: event.pageY
                };
                type = "touchmove";                
        break;
        case "mouseup":                
                event.touches = [];
                event.touches[0] = { 
                    pageX: event.pageX,
                    pageY: event.pageY
                };
                type = "touchend";
        break;
    }    

    // touchend clear the touches[0], so we need to use changedTouches[0]
    var coors;
    if(event.type === "touchend") {
        coors = {
            x: event.changedTouches[0].pageX,
            y: event.changedTouches[0].pageY
        };
    }
    else {
        // get the touch coordinates
        coors = {
            x: event.touches[0].pageX,
            y: event.touches[0].pageY
        };
    }
    type = type || event.type
    // pass the coordinates to the appropriate handler
    drawer[type](coors);
}

我会将它们分解并研究 fiddle ，然后您应该能够重新编写代码或仅添加正确的事件。如果可能的话，我会重新设计，因为在这种情况下，函数看起来更干净一些。

如果明天有时间，我会根​​据需要编辑更多信息，只是认为这会帮助您开始。谢谢!