概要
とある案件のおまけみたいな機能として「メインのリストとは別に画像表示専用の別窓を開き、その画像を左右回転できるようにしたい。」というシステムの作成を依頼されたため作成。
せっかく書いたわりに作った事自体を忘れそうなのでネットに忘備録も兼ねて投げます。
なお、画像保存・展開する部分（サーバー側）は今回は触れない。
要件
- ユーザーのモニタサイズは固定で、操作はPC限定なのでスマホの考慮は必要ない
- 画像の縦横は未定
- 画像サイズは非常に大きい場合もあるのでcanvasに表示できない
- 左右回転時に画像の一部が切れてしまってはいけない
- jQueryは使わない
実際のプログラム
別窓に開くところ
リストから下記HTMLのボタン部分をクリックしたら画像表示窓が開くという構成予定。
list.html
<button type="button"
onClick="window.open('image.html', 'image_window', 'width=600, height=600, scrollbars=0')"
>画像</button>
画像表示窓の部分
画像サイズは不定だが、とりあえず600px程度で中身が見れれば良いとのことなので、表示できれば良いものとする。
image.html
<link rel="stylesheet" href="image.css">
<body>
<div id="btn-wrapper">
<button type="button" id="left-route">↶左回転</button>
<button type="button" id="right-route">↷右回転</button>
</div>
<div id="wrapper">
<img id="image" src="image.jpg" alt="画像">
</div>
<script src="image.js"></script>
</body>
画像は不定だが、画面サイズに横幅を強制している。
image.css
body {
overflow: hidden;
padding-top: 0;
width: 100%;
height: 100%;
}
#wrapper {
text-align: center;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#image {
width: 100%;
height: 100%;
}
実際にサイズや回転の動きを作成しているところ。
ウインドウサイズを計算するためにはシステムで利用しているものの大きさ等も考慮しないといけない。
image.js
window.onload = () => {
const image= document.getElementById("image");
//画像の縦と横のサイズを取得して、100％指定ではなく実数値で画像サイズを規定するようにする。
const imageH = image.clientHeight;
const imageW = image.clientWidth;
image.style.height = imageH + "px";
image.style.width = imageW + "px";
//画像の縦横大きい方の値を出す
const imageLongSide = imageH > imageW ? imageH : imageW;
const btnWrapper = document.getElementById("btn-wrapper");
//ボタンは高さだけ取得する
const btnHeight = btnWrapper.clientHeight
//ウィンドウサイズの変更をするとき、そのままではブラウザさんが任意で使ってしまう
// （スクロールバーやURL欄等）のサイズぶん小さくなってしまうので、事前に外側と内側のサイズを取得して差分を取る
const systemW = window.outerWidth - window.innerWidth;
const systemH = window.outerHeight - window.innerHeight;
//ウィンドウサイズを変更する。縦は画像の長い方＋ボタン。横は画像の長い方。
const windowW = imageLongSide + systemW;
const windowH = imageLongSide + btnHeight + systemH;
window.resizeTo(windowW, windowH);
//このように画像を指定したとき、横長の画像のとき、基準点が欲しいところより上になってしまうので下にずらす。
if (imageW > imageH ) {
image.style.position = "absolute";
image.style.top = (imageLongSide / 2 - imageH / 2) + "px";
image.style.left = "0";
}
//すべてが決まった段階で、画像を左右に回す場合アニメーションが動くようにする
image.style.transitionDuration = "0.25s";
document.getElementById("left-route").addEventListener("click", function() {rotate(-90)});
document.getElementById("right-route").addEventListener("click", function() {rotate(90)});
};
let imageD = 0; //画像角度。
const rotate = (x) => {
const image= document.getElementById("image");
imageD += x;
image.style.transform = "rotate(" + imageD + "deg)";
}
}
まとめ
モニタサイズを変更するのにより短いコードで同じような結果になるような方法があれば教えて下さい。
画像サイズを100％表記にしている関係で、画像を開いている画面で更新ボタンを押すと意図と違う行動になります。注意。