Question

基本上，我尝试使用JavaScript，所以当在页面上按下按钮时，它将开始侦听画布上的下一个触摸。在触摸时，触发一个函数，该函数获得触摸的X和Y坐标并在那里绘制一个圆。圆圈也需要贴上标签，因此请提示获取标签。这是我的尝试和一些背景：

<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，但它们不是在正确的位置绘制的。为什么他们不在正确的位置？

Answer 1

使用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元素，因为该元素是事件处理程序的默认上下文。

在触摸位置的HTML5画布上绘制一个圆圈

1 个答案: