解放区在住氷翠メニュー

キーワードはWEBGLとJQUERY

javascript

2015-10-01 15:05

LINEで送る

こんにちは、氷翠です。

いやもう、忘れないうちにメモっておこうかと思って。

現在、WEBサイトの中で大きな画像を表示、それをドラッグによって自由に動かし、マウスホイールで拡大縮小ができるようにしたい。

これが希望。

とりあえず、HTMLの中には、

こんな感じになっています。
「ad-right-inner」の下にある「li」タグをクリックすると、画像が表示される仕組み。
その画像を拡大、縮小などさせたい、。

まずは、画像をここに表示されるように。差表示させる先は「.ad-left」の中にある「CANVAS」に画像を反映させる。これをJavascriptで組んでいくしかない。
さらに、Queryのなかでいろんなメソッドを使いたいので、

を用意。さらに画像はドラッグによる移動ができるようにしないといけないので、

も準備しておく。
画像はマウスのホイールで拡大縮小をさせたいので、

というプラグインも準備。とりあえず、あとはプログラムでなんとかなる。

基本的にJqueryの様式で記述する。で、クリックなどのイベントもJqueryで行うため、

これを記述しておく。この中でプログラムを書いていく。

まずはリストをクリックしたときの動きとしては…
イベントが「クリック」だということ。
次に、画像はWEBGLを利用するということで、「<canvas>タグ」を使います。
実際には、この「canvas」に画像を貼りつけて、このタグを動かすという理屈。

これがCanvasに画像を貼りつけるプログラム。意外と短い。
で、最後のほうにある四行、「$(canvas).draggable…」の部分が画像を動かすためのメソッド。

そして、これがマウスホイールを動かしたときのプログラム。ホイールを回したとき、イベントの返り値は「1」か「-1」が返ってくる。この返り値を利用して、画像を再描画させるというもの。
そのため、最後の方にある「img = new Image();」の以降は最初の記述と同じものだ。ただ表示させる大きさが違うというだけ。

ちなみに、ところどころにある「console.log();」というのは、ブラウザのコンソールに文字列を出力させるもの。
途中で値がどのようになっているのかを確認するためにこうして出力しているだけです。
これを見ながらだと処理はおそくなるのだけど、隠せば、通常通りの処理速度になるのであまりきにすることもありません。

でも、ここまではできましたが、まだ不完全なもの。
氷翠が完全と思えるところまではまだ先がありそうなのです。

追加

実は、画像をドラッグした後に拡大縮小をしようとしても何も起こらない、画像が荒くなったりといった変化があるだけ…これではなんの意味もない。
で、つい先ほど解決。

実はドラッグしたときに、Jqueryのほうで、このCanvasタグのstyle属性にwidthとheightが設定されてしまう。これが拡大縮小をしても大きさが変化しない、画像が荒くなったりする原因だったのです。

そこで、拡大縮小をするとき、上記のプログラムでいうと、

この部分、これはこれ以降のプログラムを実行するとき、それ以外のアクションの実行を止めるというもの。つまり、これを使って、マウスホイールを動かしたときに、画面がスクロールしてしまうのを防いでいたのです。
この次の行で

canvasタグのstyle属性の中にあるwidthとheightをなくしてしまう。
単純に考えると、これさえなければいいのです。だからなくしてしまう。
そうすれば、ホイールしてもスクロールせず、拡大縮小が優先される。

そんなわけでようやく出来上がった!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください