마우스 클릭과 터치에 모두 반응하는 캔버스 만들기

Question

나는 마우스 클릭에 반응하거나 (코드를 변경하기 전까지) 캔버스를 가지고 있으며 터치에 반응하는 스크립트 부분을 구현하려고합니다. ipad, 스마트 폰, 태블릿 등). 그러나 나는 두 가지 사이에 붙어있다. 한 가지 방법을 시도하면 다른 방법이 나뉘고 반대의 경우도 마찬가지입니다.

생각하십니까?

<script type="text/javascript"> 
    var canvas, ctx, canvasX, canvasY, mouseIsDown = 0; 

    function init() { 
     canvas = document.getElementById("can"); 
     ctx = canvas.getContext("2d"); 

     canvas.addEventListener("mousedown", mouseDown, false); 
     canvas.addEventListener("mousemove", mouseXY, false); 
     canvas.addEventListener("touchstart", touchDown, false); 
     canvas.addEventListener("touchmove", touchXY, true); 
     canvas.addEventListener("touchend", touchUp, false); 

     document.body.addEventListener("mouseup", mouseUp, false); 
     document.body.addEventListener("touchcancel", touchUp, false); 
    } 

    function mouseUp() { 
     mouseIsDown = 0; 
     mouseXY(); 
    } 

    function touchUp() { 
     mouseIsDown = 0; 
     // no touch to track, so just show state 
     showPos(); 
    } 

    function mouseDown() { 
     mouseIsDown = 1; 
     mouseXY(); 
    } 

    function touchDown() { 
     mouseIsDown = 1; 
     touchXY(); 
    } 

    function mouseXY(e) { 
     if (!e) 
      var e = event; 
     canvasX = e.pageX - canvas.offsetLeft; 
     canvasY = e.pageY - canvas.offsetTop; 
     showPos(); 
    } 

    function touchXY(e) { 
     if (!e) 
      var e = event; 
     e.preventDefault(); 
     canvasX = e.targetTouches[0].pageX - canvas.offsetLeft; 
     canvasY = e.targetTouches[0].pageY - canvas.offsetTop; 
     showPos(); 
    } 

function color(obj) { 
    switch (obj.id) { 
     case "green": 
      x = "green"; 
      break; 
     case "blue": 
      x = "blue"; 
      break; 
     case "red": 
      x = "red"; 
      break; 
     case "yellow": 
      x = "yellow"; 
      break; 
     case "orange": 
      x = "orange"; 
      break; 
     case "black": 
      x = "black"; 
      break; 
     case "white": 
      x = "white"; 
      break; 
    } 
    if (x == "white") y = 14; 
    else y = 2; 

} 

function draw() { 
    ctx.beginPath(); 
    ctx.moveTo(prevX, prevY); 
    ctx.lineTo(currX, currY); 
    ctx.strokeStyle = x; 
    ctx.lineWidth = y; 
    ctx.stroke(); 
    ctx.closePath(); 
} 

function erase() { 
    var m = confirm("Want to clear"); 
    if (m) { 
     ctx.clearRect(0, 0, w, h); 
     document.getElementById("canvasimg").style.display = "none"; 
    } 
} 

function save() { 
    document.getElementById("canvasimg").style.border = "2px solid"; 
    var dataURL = canvas.toDataURL(); 
    document.getElementById("canvasimg").src = dataURL; 
    document.getElementById("canvasimg").style.display = "inline"; 
} 

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(); 
     } 
    } 
} 
</script> 

Answer 1

당신은 핸들러의에 이벤트 객체를 전달되지 않습니다

이 :

function mouseUp() { 
    mouseIsDown = 0; 
    mouseXY(); 
} 

은 다음과 같아야합니다

function mouseUp(e) { // <- e 
    mouseIsDown = 0; 
    mouseXY(e);  // e -> 
} 

(및 다른 유사한)

carefu l pageX/Y을 다음과 같이 사용하십시오 : not part of any standard :

이 기능은 비표준이며 표준 트랙에 없습니다. 을 웹에 직면 한 제작 사이트에서 사용하지 마십시오. 사용자마다 작동하지 않습니다. 구현간에 큰 비 호환성이있을 수 있으며 향후 동작이 변경 될 수 있습니다.

더 나은 사용 getBoundingClientRect()는 clientX/Y과 결합 :

function touchDown(e) { 
    mouseIsDown = 1; 
    mouseXY(e.targetTouches[0]); 
} 

:

function mouseXY(e) { 
    var rect = canvas.getBoundingClientRect(); 
    canvasX = e.clientX - rect.left; 
    canvasY = e.clientY - rect.top; 
    showPos(); 
} 

또한 터치 핸들러에서 터치 객체를 전달하여 mouseXY()/touchXY()를 통합 할 수 있습니다