jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

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

2015年1月23日
この記事は掲載から1674日経過しています。
情報が古い可能性が有りますのでご了承下さい

iPhone_image

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

とりあえずサンプル

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

[js]
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;
}
}
[/js]

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

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

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

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

 
  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP