canvasに描いた長方形を動かす

2022.06.06

canvasに描いた長方形を動かす

2022.06.06

こんにちは。櫻井です。
前回はcanvasに長方形を描けるようにしました。
今回は描いた長方形を今回は動かせるようにしていきます。
やることは描いた長方形をクリックしたときは動かす、長方形以外のところをクリックしたときはを描き直すっていう処理をしていきます。

See the Pen Untitled by knap_develp (@knap_develp) on CodePen.

変数の定義

はじめに変数の定義をしていきます。
cvs、ctx、canvasProp、drawRectPropsは前回と同じです。
今回新たに動かす時の値を保管するためにrectMovePropsというオブジェクトを用意します。
startXとstartYは動かし始める直前(マウスを押したタイミング)の位置を保管します。初期値は0にしておきます。
endXとendYは動かし動かし終わったタイミング(マウスを離したタイミング)の位置を保管します。これは動かした後にdrawRectPropsの位置情報を更新するために使います。
canvasFlagは動かした時に長方形を描く処理をするのか、動かす処理をするのかを判別するために使います。

関数の定義

前回作成した関数を編集していきます。まずはgetDrewRectStartから。 if文を使って描く時と動かす時の処理を分けます。マウスを押した位置が長方形の中か外かを drawRectProps.x + drawRectProps.width > e.offsetX && drawRectProps.x < e.offsetX && drawRectProps.y + drawRectProps.height > e.offsetY && drawRectProps.y < e.offsetY で判断します。drawRectPropsのx、y、width、heightは初期値が0なので描かれていない場合は長方形の外でマウスを押した判定になります。今回は長方形の中でマウスを押した場合をtrue、外で押した場合をfalseで処理していきます。

マウスを長方形の中で押した時の処理

まずcanvasFlagにmoveという文字列を入れます。次にrectMovePropsのstartXとstartYにそれぞれ押した時の位置情報を入れておきます。最後に cvs.addEventListener(‘mousemove’, getMoveRectPos, false); で動かす処理を発火させます。

マウスを長方形の外で押した時の処理

外で押した時の処理はほとんど前回と同じです。違う点はcanvasFlagにrectという文字列を入れているところです。マウスを押したタイミングで離した時に発火させる処理を条件分岐させるための変数を再定義し、動かす時の関数をだし分けています。

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

長方形を描く処理は前回と同じなので中で押した時に長方形を動かす処理を説明します。長方形を動かす処理はgetMoveRectPosで定義します。まず変数moveXとmoveYにマウスを押した地点からどれだけ動かしたかを入れていきます。 var moveX = e.offsetX – rectMoveProps.startX; var moveY = e.offsetY – rectMoveProps.startY; 次にrectMovePropsのendXとendYを変更していきます。この値は長方形の元の位置(drawRectPropsのxとy)から動かした量を足した値にします。 rectMoveProps.endX = drawRectProps.x + moveX; rectMoveProps.endY = drawRectProps.y + moveY; ここまで出来たらclearRectで一度canvasを綺麗にして ctx.strokeRect(rectMoveProps.endX, rectMoveProps.endY, drawRectProps.width, drawRectProps.height); で新たに長方形を描きます。長方形を動かす処理はこれで終わりです。

マウスを離した時の処理

マウスを話した時の処理は前回と比べるとかなり変わっています。まずはマウスを押した時に書き換えておいたcanvasFlagを使ってswitchで条件分岐します。 if文ではなくswitch文を使っているのは今回はmoveとrectの2つだけですが後々処理が増えた時if文だとelse ifが大量に発生してしまうからです。 canvasFlagがmoveのときは drawRectPropsのxとyをrectMovePropsのendXとendYに更新します。 drawRectProps.x = rectMoveProps.endX; drawRectProps.y = rectMoveProps.endY; これをしておかないと次動かす時にガクついたりします。 moveのときはgetMoveRectPosがマウスを動かした時の処理になっているので止めます。 cvs.removeEventListener(‘mousemove’, getMoveRectPos, false); 次はrectのときです。 rectのときはgetDrewRectPosがマウスを動かした時の処理になっているので止めます。