HTML5 캔버스에서 사각형 그리기를 터치하십시오.

Question

먼저 사각형을 그리면 제대로 작동하지만 여전히 몇 가지 문제가 있습니다. 두 가지 문제가 있습니다. 첫 번째 문제는 사각형을 그릴 때 사각형을 너무 크게 만들면 단일 지점으로 되돌릴 수 없으며 작아집니다. 두 번째 문제는 사각형을 그릴 때 손가락 바로 아래가 아니라 손가락 아래 약 1 센티미터 아래에 나타납니다.

누구든지 나를 도와 줄 수 있습니까? 캔버스를 삭제하지 않음으로써 첫 번째 문제가 발생 Wardenclyffe

Answer 1

// "Draw Rectangle" Button 
function rect(){ 
var canvas = document.getElementById('canvasSignature'), ctx = canvas.getContext('2d'), rect = {}, drag = false; 

function init() { 
    canvas.addEventListener("touchstart", touchHandler, false); 
    canvas.addEventListener("touchmove", touchHandler, false); 
    canvas.addEventListener("touchend", touchHandler, false); 
} 


function touchHandler(event) { 
    if (event.targetTouches.length == 1) { //one finger touche 
    var touch = event.targetTouches[0]; 

    if (event.type == "touchstart") { 
     rect.startX = touch.pageX; 
     rect.startY = touch.pageY; 
     drag = true; 
    } else if (event.type == "touchmove") { 
     if (drag) { 
     rect.w = touch.pageX - rect.startX; 
     rect.h = touch.pageY - rect.startY ; 
     draw(); 
     } 
    } else if (event.type == "touchend" || event.type == "touchcancel") { 
     drag = false; 
    } 
    } 
} 

function draw() { 
    ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h); 
    ctx.fillStyle = "orange"; 
} 

init(); 
} 

---

감사

자바 스크립트 :

---

여기에 코드입니다. 이전 데이터는 사용자가 지우지 않는 한 캔바스에 남아 있으므로 이전에 그려진 사각형은 그대로 유지됩니다.

ctx.clearRect(0, 0, canvas.width, canvas.height); 

내가 두 번째 문제는 당신이 페이지 상대 X와 Y를 사용하고 캔버스 상대 X 것으로 기대하고 있다는 가정 및 Y.이는되지 않습니다 :이처럼 캔버스를 지울 수 있습니다 캔버스의 왼쪽 위 모서리가 문서의 왼쪽 위 모서리와 같지 않은 경우 이 같은 새로운 브라우저에서 캔버스의 X 및 Y에 페이지 X와 Y를 변환 할 수 있습니다 : 캔버스가 스크롤과 요소에있는 경우이 추가 조정이 필요합니다

var clientRect = canvas.getBoundingClientRect(); 
var canvasX = touch.pageX - clientRect.left - window.pageXOffset, 
    canvasY = touch.pageY - clientRect.top - window.pageYOffset; 

.