[js]画像ファイルのサイズがわかるのは、開いた後

昨日は「キャッシュが残ってるんだかなんだか」と書いたのだが、あれは実装が悪かった。

キャンバスをクリックしたときに画像を移動させるのだが、クリック位置が画像の中心になるようにしたかった。
だから描画の際は、描画の開始位置を画像サイズの半分だけずらすようにしていた。

でも「半分」ってことは、割り算を使うやん(ビットシフトでいいんだけど)。
そう思うと、最初に計算して使い回した方がいいかな、と考えた。
考えた私は、コンストラクタで計算するようにした。

それが、Imageのsrcプロパティを設定した後に、widthとheightを取得して計算していたのだ。
が、よくよく考えるとsrcプロパティは画像ファイル名を設定するだけで、実際に読み込むのはonloadとかそんなタイミングだから、まだwidthやheightは値がないのだ。
なので、初回はクリックしても画像が左上から描画されていたのだ。

 

で、再読込させると、今度はファイル読み込み済みのためか、srcプロパティを設定した段階でwidthとheightが取得できるようだ。
だから、リロードするとうまくいって「キャッシュが残ってたんだ」と思い込んでいた。

いやあ、いろいろ難しいですな。