faceの作り方④ [face.js] mousePack();
こんにちわ。いたかなやです。
今日も来て頂いてありがとうございます。
ひまつぶしアプリ程度でここまで引っ張ってしまってすみません。
でも、ブログに書こうとすることで、自分が理解していない部分が見えてくるのです。
そこを調べることで、少しでも理解が深まればいいなと思って書いています。
調べてもあまり理解できなかったところは、曖昧にしていると思います。笑
是非ぜひ突っ込んでください!!!汗
また忘れたときに、自分のブログを参考にするってけっこー嬉しいんですよね。
言うまでもないですが、他の人に参考にして頂ければ、もっと嬉しいのです。
そんなこんなで、面白くもない事を書き留めておこうと頑張っています。
お付き合いください。
前回まで、
◎ 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 にもアップしてみました。
使い方があまり良くわかってませんが、良かったらどうぞ!
《https://github.com/itakanaya9/face》
全5回にわたって紹介させて頂いた『ひまつぶしアプリface』ですが、
けっこーたくさんの方に遊んで頂いているみたいで、
大変嬉しく思っています。
今後は、もっとクオリティーをあげられるように頑張りますので、
よろしくお願いいたします。