プログラミング雑記: Cardboard実験サイト 5 / cardboard.jsに含まれる関数、変数

デモサイト

ダウンロード

Config
画面レイアウト、イベントハンドラ設定を行う。
コーディングを容易にするため、よく使用するオブジェクトを変数にセットする。

関数

Config.setBoxSizes()
ContainerとouterBox、およびboxL、boxRのサイズを設定する。
3DでboxL、boxRがある場合に用いる。

Config.setContainerSize()
ContainerとouterBoxのサイズを設定する。
2DでboxL、boxRがない場合に用いる。

変数

Config.conatiner
Config.outerBox
Config.boxL
Config.boxR
Config.ifL
Config.ifR
divのidに対応する変数
document.getElementIdで取得したオブジェクト。HTMLに該当のidのdivがない場合はnull。

Config.isIOS
iOSまたはAndroidの場合にtrue。
もともとiOSに対応するために設けた変数だが、Androidでも動作するのでその場合もtureに設定するようにした。

Config.winW
Config.winH
画面サイズに関する変数
ただし、isIOS==falseの場合はiPhone6のサイズ（667x375)を設定。

Config.centerX
Config.centerY
boxL、boxRの中心の位置

Config.addClickEvent
イベント設定制御
デフォルト値はtrueで、outerBoxにtouchstartまたはclickイベントハンドラをセットする。
デフォルトではダブルタップ（またはクリック）時は左画面の場合は上の階層に戻り、右画面の場合はreloadを行う。
ただしiframeを使用する構成などでイベントが渡ってこない場合は実行されない。
イベントハンドラが不要な場合はsetBoxSizesまたはsetContainerSizeを呼ぶ前にこの変数の値をfalseにセットする。

Config.onclick
シングルタップ（またはクリック）時はデフォルトでは何も行わない。
この変数にfunctionをセットしておくと、それを実行する。

------------------------------------------------------------

Canvas
描画エリアにオブジェクト追加。
タイマーイベントでアニメ描画。

関数

Canvas.add(func)
描画を行うオブジェクト（function)を追加する。
func : Partsのサブクラス。
左右の画面の各々にnew func(..)でオブジェクトを生成し、それをひとつにまとめLRPairオブジェクトを生成して返す。

Canvas.remove(obj)
Canvasに登路されたオブジェクトを削除する。
objはCanvas.addが返したLRPairオブジェクト。

Canvas.clear()
Canvasに登録されたオブジェクトを全て削除する。

Canvas.start()
アニメーションを開始する。

変数

Canvas.interval
アニメーション実行間隔(msec)。直前の描画開始から少なくともこのミリ秒が経過してから次の描画を開始する。
描画にかかった時間がこれ以上の場合はすぐに次の描画を開始する。
デフォルト値=50msec。

------------------------------------------------------------

LRPair

　左右二つの描画エリアをまとめて扱う。

　Canvas.addで追加されたfuncのオブジェクトを左右各々生成し、保持する。

setParam(param)

　保持している左右のオブジェクトの各々にパラメータをセットする。

　param: key-valueペアの配列。{key : value, ... }

　パラメータの扱いはPartsオブジェクトに依存。

move()

　保持している左右のオブジェクトの各々のmove関数を呼ぶ。

プロパティー

innerText

　保持している左右のオブジェクトの各々が配置されているdivのinnerTextの値の設定。

　取得の場合は左側のdivのinnerText（通常は左右同じ値）。

------------------------------------------------------------

Parts

　Canvas.addの引数につかうクラス。実際の描画はサブクラスに実装する。

関数

setParam(param)
パラメータ設定。
param: Paramオブジェクト

applyParam()
setParamで設定されたパラメータをオブジェクトに反映する。
実際のロジックはサブクラスで実装する。

move()
タイマーイベントで呼ばれ、描画を実行する。
実際の描画はサブクラスに実装する。

------------------------------------------------------------

Param

　key−value辞書

Param.val(key)

　オブジェクトが保持するkey−value辞書からkeyに対応するvalueを返す。

------------------------------------------------------------

Objectへのプロパティー追加

param

　オブジェクトのdictの値の設定、取得。

------------------------------------------------------------

その他

画面がスワイプで動かないようにするため、touchmoveイベントをキャンセルする。

<body ontouchmove="blockMove(event)">

function blockMove(event) {
if (Config.isIOS) event.preventDefault();
}