こんにちは。櫻井です。 前回はcanvasに描いた長方形を動かせるようにしました。 今回は複数の長方形を描いて動かせるようにしていきたいと思います。

See the Pen Draw and move multiple rect by knap_develp (@knap_develp) on CodePen.

変数の定義

はじめに変数の定義をしていきます。 canvasFlag、cvs、ctx、canvasProps、drawRectPropsは前回と同様です。 rectMovePropsは前回から少し変更を加えています。 まずどの長方形を動かすのか保管しておくためにidを追加、さらに動かし始める前の情報を保管しておくためにx、y、width、heightを追加しました。 iは長方形の書かれた数を保管するのに使います。これがidになります。 resultはマウスを押した位置に長方形があるかないかの判定とあった場合にその長方形のidを保存するために使います。 itemsには描かれた長方形の情報を保管していきます。

関数の定義

まずはrectHitから説明していきます。 rectHitはマウスを押した時にマウスが長方形の上かどうかを判定する関数です。 前回の判定だとx軸とy軸両方プラス方向に書いたもの以外はきちんと判定できていないことに気づいたので関数にしました。 positiveXはx軸がプラス方向に描かれた長方形に対しての判定です。 positiveYはy軸がプラス方向に描かれた長方形に対しての判定です。 negativeXはx軸がマイナス方向に描かれた長方形に対しての判定です。 negativeYはy軸がマイナス方向に描かれた長方形に対しての判定です。 最後にpositiveXとpositiveYが正の時、positiveXとnegativeYが正の時、negativeXとpositiveYが正の時、negativeXとnegativeYが正の時にtrueを返すようにしています。

次にdrawRectです。 drawRectは条件分岐で何回か長方形を描くか動かすかを分岐させないといけなかったので修正が必要になった時に複数箇所触るのが嫌で長方形を描く直前の処理を一つにまとめました。やっていることは前回までと変わりません。

次はmoveRectです。 moveRectは動かす直前の処理を関数にまとめたものです。動かす長躯善の処理には前回から少し変更を加えています。 まず長方形が複数個ある可能性があるので動かす長方形のidが必要になります。そのため引数でidを渡して処理させてます。 引数で渡されたidを元にitemsから長方形の情報を取得してitemに入れます。 長方形を動かした時に動かす前の長方形が描画され続けてしまうのでrectMovePropsに動かす前の情報を保管してからitemsからidの長方形の情報を一時的に削除します。 削除したら実際に動かす処理に移ります。

次にgetDrewRectStartです。 getDrewRectStartは長方形があるかないかと長方形の上かどうかを判断する処理を加えています。 まずpointにマウスを押した瞬間の位置情報を保存します。 次にitemsに長方形の情報が入っているかどうかを確認してある場合はitemsに入っている長方形の情報の数だけfor文を回しrectHitでマウスを押した位置が長方形の上かどうかを判定して結果をresultのtruthに保管します。truthがtrueの時はresultのidにkeyを保管してfor文を終了させます。 truthがtrueの時はmoveRectにマウスを押した位置とresultのidを渡します。 falseの時はdrawRectにマウスの位置を渡します。 itemsに長方形の情報が入っていない場合はdrawRectにマウスの位置を渡します。

次はgetDrewRectPosです。 getDrewRectPosはclearRectでマウスを動かす度にcanvas内の長方形を消していたのでそのままだと複数個の長方形を描いても消えてしまうので少し変更を加えています。 clearRectで消した後に、itemsが空でなかったらforEach文で長方形の数の分だけitemsに入っている情報を使って長方形を描くように変更しています。

次にgetMoveRectPosです。 getMoveRectPosもgetDrewRectPosと同様にマウスを動かす度にcanvas内の長方形を消していたのでそのままだと複数個の長方形を描いても消えてしまうのでclearRectで消した後に、itemsが空でなかったらforEach文で長方形の数の分だけitemsに入っている情報を使って長方形を描くように変更しています。

最後にgetDrewRectEndです。 前回まではただremoveEventListenerでマウスを動かした時の処理を止めていただけですが今回はここで長方形の情報を保管する処理を挟んでいます。 まずcanvasFlagがmoveの場合はitemsにマウスを押した時に保存しておいた動かす前の長方形のidをキーにしてwidth、hegihtを保存するのと動かした後のx軸とy軸の位置が入っているendXとendYを保存します。 次にcanvasFlagがrectの時はitemsにiをキーにしてdrawRectPropsのx、y、width、heightを保管した後にiの数を一つ増やして完成です。

まとめ

前回から長方形を複数個かけるようにしたことでかなりJSが複雑になってきた感じがします。 ちょうど今週はIE11のサポートが切れたことでアロー関数やlet、const、Mapなどこれまでは使えなかった要素も使ってみました。次回は長方形を消す処理を追加したいと思います。