FC2ブログ

マウスボタンのアップダウン処理

描画のときの処理

実際に、canvasに描画するには

canvasObj.addEventListener("mousemove",fuction(evt){
if(!canvasObj.drawFlag){
return;
}

var x=evt.offsetX||evt.layerX;
var y=evt.offsetY||evt.layerY;

context.strokeStyle="rgba(255,255,255,1)";
context.lineWidth=10;
context.lineCap="round";
context.beginPath();
context.moveTo(canvasObj.oldX,canvasObj.oldY);
context.lineTo(x,y);
context.stroke;
context.closePath();
canvasObj.oldX=x;
canvasObj.oldY=y;
},false);

では、恒例の解説へ

まず、マウスポインタがcanvasにあるかを判定する
これは、mousemoveイベントを使う

canvasObj.addEventListener("mousemove",fuction(evt){

マウスボタンが押されたら
押されたら場所のx,y座標を求め
Canvasオブジェクトの
oldXoldY
へ代入

このときに、格納する
oldX
oldY
は自作の変数

あと、マウスの座標はEventオブジェクトに入っているので
offsetX
offsetY
を読み出せば、x,y座標を取得できる

ただし、firefoxの場合は別で
layerX
layerY
に格納されている 

このため
||を使って、どちらでも対処可能にする
||は論理演算子のOR

ここをソースにすると
canvasObj.oldX=evt.offsetX||evt.layerX;
canvasObj.oldY=evt.offsetY||evt.layerY;

続いて、マウスのボタンを押している状態か、それとも押していない状態か判別するため
フラグを作る
押した、押さないだけなら
clickイベントでいいけと
押したままというイベントはないので
これはフラグで対応する

ということで、
mousedownイベントなら
マウスを押した状態なので
このときに
drawFlag=true
にする

逆に、マウスを離したときには
mouseupイベントのときに
drawFlag=false;
とすれば
判別することができる

とりあえず、ここまでが
描画するときに必要なマウスの部分の処理
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック