Рисование круга на холсте HTML5 в точке касания

В принципе, я пытаюсь использовать JavaScript, поэтому, когда нажимается кнопка на странице, он начнет прослушивать следующее касание на холсте. На этом прикосновении срабатывает функция, которая получает координаты X и Y касания и рисует круг. Круг должен быть помечен также, поэтому заложите подсказку, чтобы получить ярлык. Вот моя попытка и немного контекста:Рисование круга на холсте HTML5 в точке касания

<input type="button" value="Add Symptom" onClick="touch_init();">

Когда кнопка над входной нажатии срабатывает следующее:

function touch_init(){ 
    var canvas = document.getElementById("mediCanvas"); 
    canvas.addEventListener("touchstart", drawSymptomCircle, false); 
} 

function drawSymptomCircle(event) { 
    var canvas = document.getElementById("mediCanvas"); 

    if (canvas.getContext){ 
     var ctx = canvas.getContext("2d"); 
     var x = new Number(); 
     var y = new Number(); 
     var radius = 100;   
     var symptomName=prompt("Please enter the name of your symptom:"); 

     x = event.targetTouches[0].pageX; 
     y = event.targetTouches[0].pageY; 

     x-=canvas.offsetLeft; 
     y-=canvas.offsetTop; 

     ctx.beginPath(); 
     ctx.arc(x, y, radius, 0, 2 * Math.PI, false); 
     ctx.fillStyle = "rgb(0,128,255)"; 
     ctx.fill(); 
     ctx.lineWidth = 2; 
     ctx.strokeStyle = "black"; 
     ctx.stroke(); 

     ctx.font = '15pt Calibri'; 
     ctx.fillStyle = 'black'; 
     ctx.textAlign = 'center'; 
     ctx.fillText(symptomName, x, y); 

     canvas.removeEventListener("touchstart", drawSymptomCircle, false); 
    } 
}

EDIT: Это рисует круги на самом деле внутри холста, а не только при 0 , 0, но они не нарисованы в нужных местах. Почему они не в правильном месте?

источник

2015-04-22 user3411407

Ваш код выглядит по существу правильным для меня. Когда вы говорите, что круги «не нарисованы в правильных местах», что вы имеете в виду? Нарисованы ли они в каком-то смещении от места касания? На случайных позициях? Всегда в том же, но неправильном положении? И зарегистрировали ли вы значения x и y на консоли или использовали отладчик, чтобы убедиться, что они выглядят разумно? – dgvid

Спасибо за ответ. В течение последних нескольких минут добавлено предупреждение, сообщающее о координатах, и предполагая, что верхний левый угол холста должен быть равен 0,0 (я думаю, что именно там происходит происхождение), координата x отсутствует примерно 630, а у на 100 ........ – user3411407

Использование clientX/Y вместо и использовать ограничивающий прямоугольник, чтобы компенсировать положение холста:

function drawSymptomCircle(event) { 

    var canvas = this; // no need to get canvas element from DOM, this = canvas 

    if (canvas.getContext){ // this test should be done once in global, not here :) 
     ... 

     var rect = this.getBoundingClientRect(); // absolute position of canvas 
     x = event.targetTouches[0].clientX;  // relative to client win 
     y = event.targetTouches[0].clientY; 

     x -= rect.left;       // adjusted to be relative to canvas 
     y -= rect.top; 

     ...

получение Также getContext() является то, что я бы порекомендовал вам сделать в глобальной/родительской области. this будет представлять элемент canvas, поскольку этот элемент является стандартом по умолчанию для обработчика события.

источник

2015-04-22 17:29:38 K3N

Рисование круга на холсте HTML5 в точке касания

ответ

Смежные вопросы