目標は商店街をつくる事なんです。

あきらめてるわけじゃないんです。今やっていることが、必ず力になると思うんです。

faceの作り方④ [face.js] mousePack();

こんにちわ。いたかなやです。

今日も来て頂いてありがとうございます。




ひまつぶしアプリ程度でここまで引っ張ってしまってすみません。

でも、ブログに書こうとすることで、自分が理解していない部分が見えてくるのです。

そこを調べることで、少しでも理解が深まればいいなと思って書いています。

調べてもあまり理解できなかったところは、曖昧にしていると思います。笑

是非ぜひ突っ込んでください!!!汗




また忘れたときに、自分のブログを参考にするってけっこー嬉しいんですよね。

言うまでもないですが、他の人に参考にして頂ければ、もっと嬉しいのです。




そんなこんなで、面白くもない事を書き留めておこうと頑張っています。

お付き合いください。





前回まで、

◎ひまつぶしアプリ face

◎ faceの作り方① ( index.html )

◎ faceの作り方② (face.js) canvas/context

◎ faceの作り方③ (face.js) shotEye();




今日は、第5回目の最終回です。

『faceの作り方④ [face.js] mousePack();』


canvas上のマウスの座標取得とクリックしたときの処理などなど・・です。




とりあえずコードです。

function mousePack(){//マウス処理
	mouseMoveInCanvas();
	mouseOutInCanvas();
	mouseClickInCanvas();

	function mouseMoveInCanvas(){//マウスを動かした時の処理
		var canvas = document.getElementById("canvas");
		canvas.onmousemove = function (e){
			var rect = e.target.getBoundingClientRect();
			var mx=e.pageX-rect.left;
			var my=e.pageY-rect.top;
			clearCanvas();
			place(mx,my);
			face();
			label();
			var exr=180+(mx-180)/20;
			var eyr=180+(my-180)/20;
			var exl=220+(mx-220)/20;
			var eyl=180+(my-180)/20;
			eyes(exr,eyr,10);
			eyes(exl,eyl,10);
			count=0;
		}
	}
	
	function mouseOutInCanvas(){//マウスがキャンバスから出た時の処理
		var canvas = document.getElementById("canvas");
		canvas.onmouseout = function (e){
			clearCanvas();
			face();
			label();
			eyes(180,180,10);
			eyes(220,180,10);
			count=0;
		}
	}
	
	function mouseClickInCanvas(){//クリックした時の処理
		var canvas = document.getElementById("canvas");
		canvas.onmousedown = function (e){
			var rect = e.target.getBoundingClientRect();
			var mx=e.pageX-rect.left;
			var my=e.pageY-rect.top;
			clearCanvas();
			place(mx,my);
			face();
			label();
			var exr=180+(mx-180)/20;
			var eyr=180+(my-180)/20;
			var exl=220+(mx-220)/20;
			var eyl=180+(my-180)/20;
			shotEye(mx,my,exr,eyr,exl,eyl);
		}
	}
}


mouseMoveInCanvas(マウスを動かした時の処理)

mouseOutInCanvas(マウスがキャンバスから出た時の処理)

function mouseClickInCanvas(クリックした時の処理)

という3つの関数をひとまとめにして、mousePackという関数にしています。




index.html にもあったと思いますが、

mousePace();

を読み込んでおけば、

それぞれのイベントが発生したときに、それぞれの関数が呼ばれる。

という流れになっています。




それぞれの関数の中身は、

前回までに紹介した関数を寄せ集めた物なので、特に説明する必要は、ないかと思いますが、軽くまとめて起きたいと思います。




mouseMoveInCanvas(マウスを動かした時の処理)

function mouseMoveInCanvas(){//マウスを動かした時の処理
	var canvas = document.getElementById("canvas");
	canvas.onmousemove = function (e){
		var rect = e.target.getBoundingClientRect();
		var mx=e.pageX-rect.left;
		var my=e.pageY-rect.top;

     	//・・・・・

		var exr=180+(mx-180)/20;
		var eyr=180+(my-180)/20;
		var exl=220+(mx-220)/20;
		var eyl=180+(my-180)/20;
		shotEye(mx,my,exr,eyr,exl,eyl);
	}
}


e.pageX : ページ内でのマウスのx座標
rect.left : canvasの左の座標
なので、
mx=e.pageX-rect.left : canvas内でのマウスのx座標
となります。

myも同様の計算で、canvas上のマウスの座標を取得しています。



つぎに
exr : 右目のx座標
eyr : 右目のy座標
exl : 左目のx座標
eyl : 左目のy座標
について、





exr=180+(mx-180)/20
 マウスと目の距離の20分の1を中心の座標に足しています。


他の3つも同様の計算を行っています。



ちなみに、
右目の中心の座標は ( 180 , 180 )
左目の中心の座標は ( 220 , 180 )
です。







mouseOutInCanvas(マウスがキャンバスから出た時の処理)

目の位置を中心に戻しているだけです。







mouseClickInCanvas(クリックした時の処理)

前回紹介した shotEye() を呼び出しています。










以上です。




ちなみに GitHub にもアップしてみました。
使い方があまり良くわかってませんが、良かったらどうぞ!
f:id:itakanaya9:20131023133112p:plain
https://github.com/itakanaya9/face




全5回にわたって紹介させて頂いた『ひまつぶしアプリface』ですが、
けっこーたくさんの方に遊んで頂いているみたいで、
大変嬉しく思っています。



今後は、もっとクオリティーをあげられるように頑張りますので、
よろしくお願いいたします。