2012年6月23日土曜日

HTML5+JavaScriptによるパノラマ写真実装例



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 件のコメント: