在触摸位置在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画布上绘制圆形

回答

相关问题