ロゴ
menu
HOME > ｊQuery・Javascript > パソコンやスマートフォンでお絵かきが出来るものを作ってみました

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

iPhone_image

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

とりあえずサンプル

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

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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チャットは元々画像のアップロードしてログに表示するって事が出来ますので、組み込むのは割と簡単にいけそうです。

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

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