1

该主题可能不足以解决我的问题，对此感到抱歉，因为我对这些条款不太胜任。问题是我有一个画布，当我点击鼠标时可以在上面画东西。但是当我尝试用触摸（即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();
4

2 回答 2

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 在这种情况下，这些功能看起来更干净一些。

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

于 2013-08-12T03:20:34.007 回答
0

您应该使用“触摸”事件，例如 ouchstart,touchend,touchmove，这里有一篇关于触摸事件的论文，希望对您有所帮助

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

于 2013-08-12T02:58:53.367 回答