Question

这个话题可能不足以解决我的问题，因为我不太熟悉这些条款。事情是我有一个画布，可以在我点击鼠标时绘制的东西..但是当我尝试用触摸（即iphone和其他触摸操作设备）时，它没有检测到动作所以没有东西可以绘制帆布.. 检测触摸动作需要什么？任何想法都会很棒..

这是我的js小提琴链接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);
}

我会打破这些并研究那个小提琴，然后你应该能够重做你的代码或只是加入正确的事件。如果可能的话，我会返工，只是b / c在这种情况下功能似乎更清晰。

如果我明天有时间，我会在需要的时候编辑一些更多的信息，只是想一想这会帮助你开始。谢谢！

Answer 2

你应该使用“触摸”事件，如ouchstart，touchend，touchmove，这里有一篇关于触摸事件的文章，希望它能帮到你

http://www.html5rocks.com/en/mobile/touch/

在JavaScript中的Mouseactions与touchevents

2 个答案: