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

See the Pen refresh and return btn by knap_develp (@knap_develp) on CodePen.

変数の定義

はじめに変数の定義をしていきます。 ほとんど前回と一緒ですが新たに3つ程追加しました。 refreshBtnは削除ボタンを格納した変数です。 returnBtnは戻るボタンを格納した変数です。 retrunItemsは戻る時のためにitemsを都度入れることでログを管理するための変数です。

関数の定義

getDrewRectEndはretrunItems.set(retrunItems.size, new Map(items)); を追加したました。 これでマウスを話したタイミングでitemsの状態をretrunItemsに保管しておきます。 次にrefreshBtnを押した時の処理を説明します。 refreshBtnを押したらまずitemsを空にしてcanvasを初期化します。 初期化が終わったら retrunItems.set(retrunItems.size, new Map(items)); で初期化したこともretrunItemsに渡しておきます。 itemsを空にするのは一度空にしないと動かした時と描く時にitemsにデータが残っているとcanvasに再度描画されてしまうからです。 最後にreturnBtnを押した時の処理を説明します。 returnBtnは一つ前に戻る処理です。 まずretrunItems.size-1 が1以上のときはretrunItemsにログが2つ以上入っている状態で、1つ前の状態はretrunItems.get(retrunItems.size – 2)で取得できます。 取得した1つ前の情報をforEachで回してitemsの情報を1つ前のものに変えます。 itemsを1つ前の情報に変えたらretrunItems.delete(retrunItems.size – 2); でretrunItemsから取得した1つ前の情報を消してcanvasを初期化してからitemsの内容を描画します。 retrunItems.size-1 が0のときはログが一つしかない状態なのでretrunItemsもcanvasも初期化してreturnBtnとrefreshBtnを押せないようにしたら完成です。

まとめ

戻るボタンの管理のためにログを保管しておくのが思いの外大変でしたもっとうまいやり方がありそうな感じはしますが今回は一旦ここまでです。 次回は一括削除ではなく個別に削除できるようにしていきたいと思います。