ドット絵を俯瞰して眺めるためのプレビュー画面を追加。
あと、ついでにイシュー「キーボードで操作できるようにしたい #2」の対応も。
作ったもの
プレビューは、アクティブなお絵描きエリアの描画内容を表示。
下部のスライダーで拡大・縮小が可能。
クラス図
PreviewControllerがプレビューにかかわるCanvasやスライダーなどを管理。
他のUIとは違いユーザーが見るだけのものなので、
Mainから受け取ったPixcelArtDataを描画するシンプルな構造。
KeyBindManagerは各ボタンのインスタンスと、それに対応するキーだけを知っていて、
キーが押されたら対応するインスタンスのclickメソッドを実行するだけ。
つまづきポイント
プレビュー拡縮用のスライダー
HTMLのinput type=”range”で実装しただけ。
値が変更される際のイベントは「change」と「input」の２種類ある。
「change」は、ハンドルを離した時に発火、
「input」は、ハンドルを動くたびに発火。
参考：input type=”range”でレンジスライダーを作る｜HTMLリファレンス
JavaScript | スライダー（range）の変更イベントを実装する方法 | ONE NOTES
キー押下時のイベントはkeypressではなくkeydownを使う
「keypress」は非推奨になっており、
代わりに「keydown」が推奨されている。
「keydown」はキーを押している間中、発火し続けるので
同じ処理を何度も実行したくない場合には
「直前に押したキーと同じキーのときは処理しない」
といった制御を挟んで置く必要がある。
Canvasのサイズ指定はHTMLで
HTML上でCanvasタグに指定した幅・高さをCSSで変更すると、
描画内容もアスペクト比が崩れてしまった。
HTMLに幅・高さを指定せずにCSSで指定しても同じ。
要するに、Canvasの幅・高さはCSSで指定しないほうがよい。
ひとこと
おまけのつもりで、キーボードショートカットをつけたが、
お絵かきの操作がものすごくしやすくなってびっくしした。
「範囲選択」→「カット」→「ペースト」の一連の流れがスムーズで気持ちいい。
