2

我正在开发 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>
4

2 回答 2

3

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

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

尝试使用这样的方法...

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

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

于 2012-07-19T09:30:07.457 回答
1

我做了什么作为解决方案

我创建了一个函数并调用它而不是 draw ，它有效

function ended(){
  /*  your code here */
    }
     canvas.addEventListener('touchend',ended, false);
于 2013-03-14T13:56:04.140 回答