パソコンやスマートフォンでお絵かきが出来るものを作ってみました

発端は配布中のjQueryチャットにお絵かき機能を付けたいなぁって事からでした。

とりあえずサンプル

パソコンはマウスイベントで、スマートフォンやタブレットはタッチイベントで処理すれば良いだろうと思い、主に以下のような処理で対応してみました。

      Canvas.addEventListener("mouseup", touchHandler, true);
      Canvas.addEventListener("mousedown", touchHandler, true);
      Canvas.addEventListener("mousemove", touchHandler, true);
      Canvas.addEventListener("touchstart", touchHandler, true);
      Canvas.addEventListener("touchend", touchHandler, true);
      Canvas.addEventListener("touchmove", touchHandler, true);

      function touchHandler(e) {
        e.preventDefault();
        /*
         * タッチパネルがサポートされているか
         * それによって座標取得方法を変更する
         */
          var supportTouch = 'ontouchend' in document;
          if(supportTouch == true){
            var x = Math.floor( e.touches[0].clientX )-settings.marginLeft;
            var y = Math.floor( e.touches[0].clientY )-settings.marginTop;
          }else{
            var x = e.clientX-settings.marginLeft;
            var y = e.clientY-settings.marginTop;
          }
        
          switch (e.type) {
            case "mousedown" :
            case "touchstart" :
              Data.drawFlag = true;
              Data.defX = x;
              Data.defY = y;
            break;
            case "mouseup" :
            case "touchend" :
              Data.drawFlag = false;
            break;
            case "mousemove" :
            case "touchmove" :
                if (!Data.drawFlag) return;
                var Canvas = document.getElementById(selecter);

                context.strokeStyle = Data.defaultColor;
                context.lineWidth   = Data.defaultBrush;
                context.lineJoin    = "round";
                context.lineCap     = "round";
                context.beginPath();
                context.moveTo(Data.defX, Data.defY);
                context.lineTo(x, y);
                context.stroke();
                context.closePath();
                Data.defX = x;
                Data.defY = y;
            break;
          }
      }

後はカラーーパレット開いたり線の太さを変えたりなどの処理をポンポンといれて終わりです。スマートフォンだとアイコンの反応がちょっと悪いようですが、まぁテストなのでその辺はよしなに。

jQueryrチャットは元々画像のアップロードしてログに表示するって事が出来ますので、組み込むのは割と簡単にいけそうです。

文字だけではなく絵や手書き文字でコミュニケーションを取るって楽しいんですよね。

これはあくまでテストで作ったものですので、ペンの種類を増やしたり●とか■のスタンプをつけたり囲み枠をつけたりなど色々とやってみて実装してみようと思います。