0

iPad でキャンバス オブジェクトを使用しようとしています。ユーザーは指で自由曲線を描く必要があり、指を離すと、システムは曲線を閉じて塗りつぶさなければなりません。

実際に次のコードを書き留めましたが、問題は、描画はするが、指を離したときにパスを閉じないことです。

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=768px, maximum-scale=1.0" /> 
<title>sketchpad</title>    
<script type="text/javascript" charset="utf-8"> 
window.addEventListener('load',function(){
    // get the canvas element and its context
    var canvas = document.getElementById('sketchpad');
    var context = canvas.getContext('2d');
    var img = new Image();
    img.src = 'imp_02.jpg';
    context.drawImage(img,0,0,600,600);
    var colorPurple = "#cb3594";
    context.strokeStyle=colorPurple;
    context.lineWidth = 5;
    context.fillStyle = "red";

    // 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);
                context.stroke();
            }
        },
        touchend: function(coors){
            if (this.isDrawing) {
                context.touchmove(coors);
                context.closePath();
                this.isDrawing = false;
            }
        }
    };
    // 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);
    }

    // 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

},false);   // end window.onLoad
</script> 
<style type="text/css"><!--
    body{margin:0;padding:0; font-family:Arial;}
    #container{position:relative;}
    #sketchpad{ border: 1px solid #000;}        
--></style> 
 </head> 
 <body> 
<div id="container"> 
  <canvas id="sketchpad" width="766" height="944"> 
        Sorry, your browser is not supported.
  </canvas>     
</div> 
 </body> 
</html>

私が逃したものを理解していません。私を助けてくれる人はいますか.....どうもありがとうございました!!

4

1 に答える 1

0

間違った配列からタッチ終了座標を取得しています。

changedTouchesevent オブジェクトには、タッチが終了したポイントの座標を見つけることができる、もう 1 つの配列が呼び出されます。これらの終了座標はtargetTouches配列にありません。だからあなたが必要です

endCoordX = event.changedTouches[0].pageX;
endCoordY = event.changedTouches[0].pageY;

[シナリオに合わせて上記のコードを変更します。あなたが概念を理解してくれることを願っています....そして、真剣に私も過去に同じポイントで立ち往生し、この事実を知るために1時間以上無駄にしました....]

于 2013-07-02T16:48:36.153 に答える