Question

尝试使用触摸事件绘制画布元素时，我遇到了一些问题。发生的事情是我恢复了pageX和pageY，但它们似乎不正确。正如你在图像中看到的那样，我点击了红点所在的位置，但坐标是黑色矩形所在的位置。

我提供的代码不是我的我已经完成了一些代码，但问题是一样的，我在联想Tab3 7，小米Mi5和三星S8上尝试过，结果总是一样。

所以，任何人都可以帮我解决这个问题吗？

[编辑]当我从上到下触摸时，黑色指针从触摸点越来越远，然后我到达顶部它到达触摸点。

var can, ctx, canX, canY, mouseIsDown = 0;



    function init() {

        can = document.getElementById("canvas");

        ctx = can.getContext("2d");



        can.addEventListener("mousedown", mouseDown, false);

        can.addEventListener("mousemove", mouseXY, false);

        can.addEventListener("touchstart", touchDown, false);

        can.addEventListener("touchmove", touchXY, true);

        can.addEventListener("touchend", touchUp, false);



        document.body.addEventListener("mouseup", mouseUp, false);

        document.body.addEventListener("touchcancel", touchUp, false);

    }



    function mouseUp() {

        mouseIsDown = 0;

        mouseXY();

    }



    function touchUp() {

        mouseIsDown = 0;

        // no touch to track, so just show state

        showPos();

    }



    function mouseDown() {

        mouseIsDown = 1;

        mouseXY();

    }



    function touchDown() {

        mouseIsDown = 1;

        touchXY();

    }



    function mouseXY(e) {

        if (!e)

            var e = event;

        canX = e.pageX - can.offsetLeft;

        canY = e.pageY - can.offsetTop;

        showPos();

    }



    function touchXY(e) {

        if (!e)

            var e = event;

        e.preventDefault();

        canX = e.targetTouches[0].pageX - can.offsetLeft;

        canY = e.targetTouches[0].pageY - can.offsetTop;

        showPos();

    }



    function showPos() {

        // large, centered, bright green text

        ctx.font = "24pt Helvetica";

        ctx.textAlign = "center";

        ctx.textBaseline = "middle";

        ctx.fillStyle = "rgb(64,255,64)";

        var str = canX + ", " + canY;

        if (mouseIsDown)

            str += " down";

        if (!mouseIsDown)

            str += " up";

        ctx.clearRect(0, 0, can.width, can.height);

        // draw text at center, max length to fit on canvas

        ctx.fillText(str, can.width / 2, can.height / 2, can.width - 10);

        // plot cursor

        ctx.fillStyle = "black";

        ctx.fillRect(canX -5, canY -5, 10, 10);

    }

Answer 1

已经找到了。

真正的问题是我用CSS设置宽度和高度。需要填充Width和Height属性。

然后在触摸事件上执行此操作

function funcName(e){
   let rect = canvas.getBoundingClientRect();
   context.fillRect(e.touches[0].pageX - rect.left, e.touches[0].pageY - rect.top, 10, 10);
}

希望我解决的问题可以帮助任何人。

Phonegap帆布触摸事件

1 个答案: