Touch Draw A Square на холсте HTML5

Question

Во-первых, квадрат рисует отлично, и он действительно работает, но есть еще несколько проблем. У меня две проблемы: первая заключается в том, что когда я рисую квадрат, он не может свернуть на себя в одну точку (и получить меньше), если вы сделаете свой квадрат слишком большим. Вторая проблема заключается в том, что когда я рисую квадрат, он появляется примерно на сантиметр ниже моего пальца, а не прямо под ним.

Может ли кто-нибудь помочь мне решить эти проблемы?

---

Вот код:

JAVASCRIPT

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

---

Спасибо, Wardenclyffe

Answer 1

Первая проблема вызвана не очищая холста. Предыдущие данные останутся на холсте, если вы не очистите его, и поэтому оставшийся прямоугольник останется. Вы можете очистить холст, как это:

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; 

Это потребует дальнейшей настройки, если полотно находится в элементе с скроллинга.