Manifest+LocalStorageによるオフラインアプリ作成(5)
360°パノラマ写真をスワイプで回転させるサンプルアプリです。
水平方向のみの対応です。
デスクトップではマウスドラッグで回転します。IEでもヘッダのレイアウトが崩れますが、回転動作はします。
このアプリではManifestは設定していますが、LocalStorageは使用していません。
このサンプルアプリのパノラマ写真回転に関するコードは以下のとおりです。
メニュー画面で[Panorama]タップ時に表示するDIV
<div id="divPic" class="pic"></div>
スタイルシート
div.pic {
width:100%;
height:220px;
background-position-x:0px;
}
JavaSctipt(簡略化のためiOS対応の場合のみ抽出)
//Picオブジェクト作成
var pic = new Pic(divPic, "Images/001.jpg");
//Picクラス
Pic = function(div, url) {
this.div = div;
this.url = url;
//background-imageセット
div.style.backgroundImage = 'url("' + url + '")';
//swipeまたはdrag操作のためのイベントハンドラ
div.addEventListener("touchstart", Pic.touchStart, false);
Pic.dict[div.id] = this;
}
//DIVのidをkey、valueをPicオブジェクトとするArray
Pic.dict = new Array();
//移動量計算のため直前のtouch位置をセット. 初期値＝Number.MIN_VALUE
Pic.prevX = Number.MIN_VALUE;
//イベントハンドラから対応するPicオブジェクトを探す.
Pic.getInstance = function(id) {
return Pic.dict[id];
}
//touch 開始
Pic.touchStart = function(event) {
Pic.prevX = Number.MIN_VALUE;
var x = event.srcElement.style.backgroundPositionX;
var div = event.srcElement;
//イベントハンドラ設定
div.addEventListener("touchmove", Pic.touchMove, false);
div.addEventListener("touchend", Pic.touchEnd, false);
}
//swipe
Pic.touchMove = function(event) {
var x = event.pageX;
if (Pic.prevX == Number.MIN_VALUE) {
//一回目はprevXをセット
Pic.prevX = x;
} else {
//二回目以降
var pic = Pic.getInstance(event.srcElement.id);
//x位置の末尾の"px"を取り、数値化.
var px = pic.div.style.backgroundPositionX;
var p = new Number(px.substr(0, px.length-2));
p += (x - Pic.prevX);
//swipe量を加減した位置にbackgroundImageを移動
pic.div.style.backgroundPositionX = p + "px";
Pic.prevX = x;
}
}
//touch 終了
Pic.touchEnd = function(event) {
Pic.prevX = Number.MIN_VALUE;
var div = event.srcElement;
div.removeEventListener("touchmove", Pic.touchMove);
div.removeEventListener("touchend", Pic.touchEnd);
}
HTML5+JavaScriptによるパノラマ写真実装例
0 件のコメント:
コメントを投稿