javascript - 在触摸设备上的 HTML5 Canvas 上绘图

Question

我正在尝试让签名板正常工作。

我设法让它与鼠标一起工作，我在这里找到的一段代码没有问题:http://demos.ijasoneverett.com/html5-sigpad.php

但是它似乎不适用于移动设备，我不明白为什么，因为我添加了事件监听器

canvas.addEventListener("touchstart", mouseDown, false);
canvas.addEventListener("touchmove", mouseXY, true);
canvas.addEventListener("touchend", mouseUp, false);

这是我所有的 jQuery:

$(document).ready(function () {
    //User Variables
    var canvas = document.getElementById('canvas');  //canvas element
    var context = canvas.getContext("2d");           //context element
    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var paint;

    canvas.addEventListener("mousedown", mouseDown, false);
        canvas.addEventListener("mousemove", mouseXY, false);
        document.body.addEventListener("mouseup", mouseUp, false);

        //For mobile
        canvas.addEventListener("touchstart", mouseDown, false);
        canvas.addEventListener("touchmove", mouseXY, true);
        canvas.addEventListener("touchend", mouseUp, false);
        document.body.addEventListener("touchcancel", mouseUp, false);

    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height); // Clears the canvas

        context.strokeStyle = "#000000";  //set the "ink" color
        context.lineJoin = "miter";       //line join
        context.lineWidth = 2;            //"ink" width

        for (var i = 0; i < clickX.length; i++) {
            context.beginPath();                               //create a path
            if (clickDrag[i] && i) {
                context.moveTo(clickX[i - 1], clickY[i - 1]);  //move to
            } else {
                context.moveTo(clickX[i] - 1, clickY[i]);      //move to
            }
            context.lineTo(clickX[i], clickY[i]);              //draw a line
            context.stroke();                                  //filled with "ink"
            context.closePath();                               //close path
        }
    }

    function addClick(x, y, dragging) {
        clickX.push(x);
        clickY.push(y);
        clickDrag.push(dragging);
    }

    function mouseXY(e) {
       if (paint) {
                addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop - 40, true);
                draw();
             }
    }

    function mouseUp() {
      paint = false;
    }

    function mouseDown(e)
    {
      var mouseX = e.pageX - this.offsetLeft;
            var mouseY = e.pageY - this.offsetTop;
            paint = true;
            addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop - 40);
            draw();
    }

    //Clear the Zig
     document.getElementById("clearSig").onclick = function () {
          clickX = new Array();
          clickY = new Array();
          clickDrag = new Array();
          context.clearRect(0, 0, canvas.width, canvas.height);
          $("#imgData").html('');
    };
});

Answer 1

要获取 pageX 和 pageY 的正确值，您必须在移动设备上使用 e.touches(e.changedTouches)。例如:

function mouseXY (e) {
     var touches = e.touches || [];
     var touch = touches[0] || {};
     if (paint) {
         addClick(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop - 40, true);
         draw();
     }
}

有关更多信息，请访问 https://developer.mozilla.org/en-US/docs/Web/API/Touch_events