Pages

    2010年9月24日金曜日

    iPadでお絵かき

    JSPaintがiPad対応してないので、
    どこまで出来るかちょっと調べてみました。

    ググると結構やられてるのでネタとしてはいまいちですが
    とりあえずコードをはっときます。

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>タッチテスト</title>

    <style>
    body{ margin:0;padding:0;}
    #canvas{ border:1px solid #009; margin:30px 30px 0;}
    #log{ width:650px; height:220px; overflow:scroll;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>

    <body>
    <canvas width="450" height="250" id="canvas"></canvas>
    <div id="log"></div>
    <script>
    //参考:ASCII.jp:HTML5のCanvasで作る、Flash不要のお絵かきツール |古籏一浩のJavaScriptラボ http://ascii.jp/elem/000/000/513/513377/
    var off;
    var gapX;
    var gapY;
    var padd=30;
    var canvX;
    var canvY;
    var canvW;
    var canvH;
    var drawFlag = false;
    var oldX = 0;
    var oldY = 0;
    var $canvas;

    $(document).ready(function () {
            document.body.ontouchmove = function (e) { e.preventDefault(); };
            $canvas=$("#canvas");
            off=$canvas.offset();
            gapX=off.left;
            gapY=off.top;
            canvH=$canvas.attr('clientHeight');
            canvW=$canvas.attr('clientWidth');
            $canvas.bind("touchstart", touchStartHandler, false);
            $canvas.bind("touchmove", touchMoveHandler, false);
            $canvas.bind("touchend", touchEndHandler, false);
        });
        //タッチ開始
        function touchStartHandler(e){
            $("#log").text("touchstart");
             drawFlag = true;
                 // タッチ位置を取得
                    var fn=function(i){
                        oldX=e.originalEvent.touches[i].pageX-gapX;
                        oldY=e.originalEvent.touches[i].pageY-gapY;
                    }
        loop(e,fn);
            }
            //タッチして移動
        function touchMoveHandler(e){
            $("#log").text("touchmove");
        var fn=function(i){
                        canvX=e.originalEvent.touches[i].pageX-gapX;
                        canvY=e.originalEvent.touches[i].pageY-gapY;
                        //判定エリア内なら
                        if(canvX<=canvW+padd && canvY<=canvH+padd && canvX>=0-padd && canvY>=0-padd){

                        $("#log").text("X:"+ canvX+"Y:"+canvY);
                        //draw
                         if (!drawFlag) return;
                            var canv=document.getElementById("canvas");
                            var context =canv.getContext("2d");
                            context.strokeStyle = "rgba(220,220,220,0.7)";
                            context.lineWidth = 3;
                            context.beginPath();
                            context.moveTo(oldX, oldY);
                            context.lineTo(canvX, canvY);
                            context.stroke();
                            context.closePath();
                            oldX = canvX;
                            oldY = canvY;
                        }
        }
        loop(e,fn);
            }
            //タッチ終了
        function touchEndHandler(e){
            $("#log").text("touchend");
             drawFlag = false;
            }
        /*function touchCancelHandler(e){
            $("#log").text("touchcancel");
            }*/
            //ループ
        function loop(e,fn){
            for (var i = 5; i--;) {
                    if (e.originalEvent.touches[i]) {
                        fn(i)
                    }
                }
            }

    </script>
    </body>
    </html>

    参考: