2

HTML5Canvasでスケッチアプリケーションの開発に取り組んでいます。キャンバスに「タッチリスナー」を追加しました。

ただし、touchstartイベントとtouchmoveイベントのみが発生します。タッチエンドは起動されません。誰かが理由と修正方法を説明できますか？

<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}現在のcoors値の代わりにタッチエンド関数でそれらを使用できるようになります。

または、コードを再設計して、Touchend関数でcoors.x値とy値をすべて一緒に使用する必要がなくなるようにすることをお勧めします。

于 2012-07-19T09:30:07.457 に答える
1

私が解決策としてしたこと

関数を作成して、描画の代わりに呼び出すと、機能しました

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