javascript - Touchmove not working on mobile like mousemove on desktop

Question

Welcome To Ask or Share your Answers For Others

javascript - Touchmove not working on mobile like mousemove on desktop

posted Jan 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Touchmove not working on mobile like mousemove on desktop

Edit: I noticed that if I quickly touch the screen, a dot formed. When you touch the screen and then move it on the canvas, the page itself moving, I wonder if this has something to do with scrolling?

I have drawing page , everything working correctly on desktop but not mobile. This is simple summary of my page:

        
            var canvas, ctx, flag = false,
            prevX = 0,
            currX = 0,
            prevY = 0,
            currY = 0,
            dot_flag = false;
    
        var x = "black",
            y = 2;
        
        function candraw() {
            canvas = document.getElementById('can');
            ctx = canvas.getContext("2d");
            w = canvas.width;
            h = canvas.height;
        
    canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
    }, false);
    canvas.addEventListener("touchmove", function (e) {
        findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
    }, false);
    canvas.addEventListener("touchstart", function (e) {
        findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("touchend", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function (e) {
        findxy('out', e)
    }, false);
    canvas.addEventListener("touchcancel", function (e) {
        findxy('out', e)
    }, false);
            
            
            
        }
        
    
        
        function draw() {
            ctx.beginPath();
            ctx.moveTo(prevX, prevY);
            ctx.lineTo(currX, currY);
            ctx.strokeStyle = x;
            ctx.lineWidth = y;
            ctx.stroke();
            ctx.closePath();
        }
        
        
        function findxy(res, e) {
            if (res == 'down') {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
        
                flag = true;
                dot_flag = true;
                if (dot_flag) {
                    ctx.beginPath();
                    ctx.fillStyle = x;
                    ctx.fillRect(currX, currY, 2, 2);
                    ctx.closePath();
                    dot_flag = false;
                }
            }
            if (res == 'up' || res == "out") {
                flag = false;
            }
            if (res == 'move') {
                if (flag) {
                    prevX = currX;
                    prevY = currY;
                    currX = e.clientX - canvas.offsetLeft;
                    currY = e.clientY - canvas.offsetTop;
                    draw();
                }
            }
        }
        
        
        
   candraw();

<html>
        <body>
          <canvas id="can" width="400" height="400" style="border:2px solid;">             </canvas>
          </body>
</html>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-01-24T02:59:49+0000

I solved my problem , javascript using e.clientX and e.clientY for only desktop. So for mobile we must use touches like this: e.touches[0].clientX , e.touches[0].clientY. function findxy must be like this(dont use only touches if you want use mobile and desktop you need use devices detector i already used below):

function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
currX = e.touches[0].clientX - canvas.offsetLeft;
currY = e.touches[0].clientY - canvas.offsetTop;
}else{
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
}


flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
currX = e.touches[0].clientX - canvas.offsetLeft;
currY = e.touches[0].clientY - canvas.offsetTop;
}else{
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
}
draw();
}
}
}

Categories

javascript - Touchmove not working on mobile like mousemove on desktop

javascript - Touchmove not working on mobile like mousemove on desktop

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags