Question

我正在开发HTML5 Canvas上的草绘应用程序。我在画布上添加了“Touch Listeners”。

但只有touchstart和touchmove事件被解雇了。 Touchend没有被解雇。任何人都可以解释为什么和修复是什么？

<script type="text/javascript" charset="utf-8"> 

    var canvas ;
    var context ;


    // create a drawer which tracks touch movements
    var drawer = {
        isDrawing: false,
            touchstart: function(coors){
            context.beginPath();
            context.moveTo(coors.x, coors.y);
            this.isDrawing = true;
        },
        touchmove: function(coors){
            if (this.isDrawing) {
                context.lineTo(coors.x, coors.y);
                current_stroke+= coors.x+','+coors.y+';';
                context.stroke();

            }
        },
        touchend: function(coors){


            if (this.isDrawing) {
                context.lineTo(coors.x, coors.y);
                current_stroke+= coors.x+','+coors.y+';';
                context.stroke();
                this.isDrawing = false;


            }
        }
    };  // end of drawer 





    // create a function to pass touch events and coordinates to drawer
    function draw(event){
        // get the touch coordinates
        var coors = {
            x: event.targetTouches[0].pageX,
            y: event.targetTouches[0].pageY
        };
        // pass the coordinates to the appropriate handler
        drawer[event.type](coors);
    }


$(document).ready(function() {
    // get the canvas element and its context
    canvas = document.getElementById('sketchpad');
    context = canvas.getContext('2d');
    context.lineWidth = 5;
    context.strokeStyle = 'blue';







    // attach the touchstart, touchmove, touchend event listeners.
    canvas.addEventListener('touchstart',draw, false);
    canvas.addEventListener('touchmove',draw, false);
    canvas.addEventListener('touchend',draw, false);

    // prevent elastic scrolling
    document.body.addEventListener('touchmove',function(event){
        event.preventDefault();
    },false);   // end body.onTouchMove

});


</script>

Answer 1

这可能有点晚了但是这里......

Touchend事件没有注册x和y屏幕位置，因为实际上你的手指在屏幕上没有被触发，并且它无法调出最后一个已知的屏幕位置。

尝试使用此类方法......

在你的touchmove功能中 - 如果你像这样捕捉当前的x和y坐标：this.lastCoors = {coors.x，coors.y}你将能够在你的touchend函数中使用它们来代替当前的coors值

或者，重新设计代码可能是明智之举，因此您的Touchend功能不再需要同时使用coors.x和y值。

Answer 2

我作为解决方案做了什么

我创建了一个函数并调用它而不是绘制，它工作

function ended(){
  /*  your code here */
    }
     canvas.addEventListener('touchend',ended, false);

TouchEnd事件未在HTML5 Canvas上触发

2 个答案: