Question

最近我一直在使用响应式设计，我决定用一些引号创建一个页面，然后在那里你可以签名。您可以签名的地方使用鼠标和触摸事件在画布上绘制。它可以与鼠标完美配合，但是当我尝试拖动并绘制它时只有高亮显示框但是我可以通过点击一次绘制一个点，但我希望它像鼠标一样正常拖动。我已经设置了默认关闭但是我仍然无法修复此问题。我不知道它是否与用触摸突出显示的画布有关。以下是触摸的个别代码，不在我的网站中，而是在画布网页中：

<html>
<head>
<title>Sketchpad</title>

<script type="text/javascript">
var canvas;
var ctx;
var mouseX;
var mouseY;
var mouseDown=0;
var touchX,touchY;
function drawCircle(ctx,x,y,size) {
    r=0; g=0; b=0; a=255;//opaque
    ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI*2, true); 
    ctx.closePath();
    ctx.fill();
} 
function clearCanvas(canvas,ctx) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}
    //get mouse position
function getMousePosition(moves) {
    if (!moves)
        var moves = event;

    if (moves.offsetX) {
        mouseX = moves.offsetX;
        mouseY = moves.offsetY;
    }
    else if (moves.layerX) {
        mouseX = moves.layerX;
        mouseY = moves.layerY;
    }
 }

function canvases_touchStart() {
    getTouchPosition();

    drawCircle(ctx,touchX,touchY,4);

    //prevents another mousedown
    event.preventDefault();
}

//draw and prevent default scrolling with touch
function canvase_touchMove(moves) { 
    getTouchPosition(moves);

    drawCircle(ctx,touchX,touchY,4); 

    //prevent scrolling
    event.preventDefault();
}


function getTouchPosition(moves) {
    if (!moves)
        var moves = event;

    if(moves.touches) {
        if (moves.touches.length == 1) { //one finger
            var touch = moves.touches[0]; //get info for finger
            touchX=touch.pageX-touch.target.offsetLeft;
            touchY=touch.pageY-touch.target.offsetTop;
        }
    }
}
function canvase_mouseDown() {
    mouseDown=1;
    drawCircle(ctx,mouseX,mouseY,4);
}
function canvase_mouseUp() {
    mouseDown=0;
}
function canvase_mouseMove(moves) { 
    getMousePosition(moves);
    if (mouseDown==1) {
        drawCircle(ctx,mouseX,mouseY,4);
    }
}



function init() {

    canvas = document.getElementById('canvase');

    if (canvas.getContext)
        ctx = canvas.getContext('2d');

    //check for ctx first 
    if (ctx) {
        canvas.addEventListener('mousedown', canvase_mouseDown, false);
        canvas.addEventListener('mousemove', canvase_mouseMove, false);
        window.addEventListener('mouseup', canvase_mouseUp, false);
        canvas.addEventListener('touchstart', canvase_touchStart,    false);
        canvas.addEventListener('touchmove', canvase_touchMove, false);
    }
}
</script>

<style>
#whole {
/*prevents highlighting text*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#instructions {
width:30%;
height:15%;
padding:2px;
border-radius:4px;
font-size:120%;
display: block;
margin-left: auto;
margin-right: auto;
text-align:center;
}
#board {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1%;

}
#canvase {
height:300;
width:400;
border:2px solid black;
border-radius:4px;
position:relative; 
 display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1%;
}
#clearbutton {
font-size: 150%;
padding: 2px;
-webkit-appearance: none;
background: green;
border: 1px solid black;
color:white;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>

<body onload="init()">
<div id="whole">
    <div id="instructions">
         Sign name by tapping or dragging in box (draw slowly to  prevent single <br/><br/>
         <input type="submit" value="Clear Board" id="clearbutton" onclick="clearCanvas(canvas,ctx);">
    </div>
    <div id="board">
        <canvas id="canvase" height="300" width="400">
        </canvas>
    </div>
</div>
</body>
</html>

有没有人对此问题或解决方法有任何想法？

Answer 1

似乎canvase_touchStart事件导致问题。

您可以删除行canvas.addEventListener('touchstart', canvase_touchStart, false);和相应的函数function canvases_touchStart() {...}

CODEPEN

希望这有帮助。

PS：要知道如何创建更流畅的效果，您也可以参考此CODEPEN。

用触摸html画布绘制只绘制点

1 个答案: