在觸摸位置在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); 
    } 
}

編輯：這畫的圈子其實畫布裏面，不只是在0 ，0，但他們沒有在正確的地方畫出來。他們爲什麼不在正確的地方？

來源

2015-04-22 user3411407

你的代碼看起來對我來說基本上是正確的。當你說圈子「不是在正確的地方畫出來的」時，你的意思是什麼？它們是否與觸摸位置有一些偏移？在隨機職位？總是處於相同但錯誤的位置？並且，是否已將x和y的值記錄到控制檯或使用調試器來確保它們看起來合理？ – dgvid

感謝您的回覆。在過去的幾分鐘裏，增加了一個警報來報告座標，並且假定畫布的左上角應該是0,0（我認爲這是原點通常在哪裏），x座標已經被大約630，而y由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將表示畫布元素，因爲元素是事件處理程序的默認上下文。

來源

2015-04-22 17:29:38 K3N

在觸摸位置在HTML5畫布上繪製圓形

回答

相關問題