スマホ対応アニメーション支援ライブラリ
Box 表示オブジェクト
表示オブジェクト。入れ子構造を作ることも可能。
Divエレメントをラップしている。
記述例
var stage = new smart.Stage("demo2");
var box1 = new smart.Box(200,100);
box1.style({background:"#ee6600"});
box1.x = 20;
box1.y = 20;
stage.addChild(box1);
var box2 = new smart.Box(100,50);
box2.style({background:"#6699ff"});
box2.x = 20;
box2.y = 20;
box1.addChild(box2);
プロトタイプ
メソッド
| new Box(width,height) | Boxオブジェクトを作成します。引数(幅、高さ、ピクセル指定)は省略可能です。 |
| on(eventName,fn) | オブジェクトがイベントを発行した時に実行する関数を登録。 eventNameはスペースでつなげて複数設定することも可能。 |
| off([eventName,fn]) | オブジェクトがイベントを発行した時に実行する関数を削除。 関数指定が無い場合には、指定されたtypeに紐づく全ての関数を削除。eventName指定が無い場合には、全ての関数を削除。 |
| trigger(eventName,[data]) | eventNameで指定したイベントを発行する。 発行するイベントオブジェクトにはtype,target(発行元)が自動的に設定される。data(オブジェクト)を設定することでイベントオブジェクトを拡張できる。 |
| reg(x,y) | ※暫定機能 回転や拡大縮小の際の基準y座標を0~1で指定。デフォルトは 0.5 |
| style(styleObject) | ※暫定機能 スタイルをオブジェクト形式で指定。 |
| addChild(view,[index]) | 表示オブジェクトを追加する。indexを指定して挿入位置を変更可能。 |
| removeChild(view) | 表示オブジェクトを削除する |
| child(id) | idを指定して表示オブジェクトを取得する |
プロパティ
| enabled | Boolean | イベントの発行の有効/無効を設定、または取得。 false を代入すると、"click"、"mouseover" などの処理を unbindせずに一時的に無効化できる。 |
| element | DOMElement | 読み取り専用。自身のDOMElementへアクセスする。 |
| id | String | idを指定、取得する。DOMエレメント名。 |
| parent | View | 読み取り専用。自身が配置されている親表示オブジェクトを取得する |
| visible | Boolean | 表示 /非表示を指定、取得する |
| x | Number | x座標を指定、取得する |
| y | Number | y座標を指定、取得する |
| z | Number | z-indexを指定、取得する |
| alpha | Number | 不透明度を指定、取得する。デフォルトは 1 |
| scaleX | Number | 幅方向の拡大率を指定、取得する。デフォルトは 1 |
| scaleY | Number | 高さ方向の拡大率を指定、取得する。デフォルトは 1 |
| scale | Number | 拡大率を指定、取得する。デフォルトは 1 |
| rotation | Number | 回転角度を指定、取得する。例) view.rotation = 45; |
| regX | Number | 回転や拡大縮小の際の基準x座標を指定、取得する。デフォルトは 0。(左上) |
| regY | Number | 回転や拡大縮小の際の基準y座標を指定、取得する。デフォルトは 0。(左上) |
| stage | Stage | 読み取り専用。自身が配置されたStageオブジェクトを返す |
| width | Number | 幅をピクセルで指定、取得する。例外的に "auto" のみ代入可能。(デフォルト auto) |
| height | Number | 高さをピクセルで指定、取得する。例外的に "auto" のみ代入可能。(デフォルト auto) |
| mask | Boolean | 指定した幅、高さをはみ出した子オブジェクトを表示するかどうか指定する |
| children | Array | 読み取り専用。addChildされた子オブジェクトの配列を返す |
| html | String | テキスト(HTMLタグを含む)を指定。取得する。 |
イベント
| "click" | 自身をクリックときに発行 |
| "mouseover" | カーソルが自身の領域に入ったときに発行 |
| "mouseout" | カーソルが自身の領域から外れたときに発行 |
| "mousedown" | カーソルが押されたときに発行 |
| "mouseup" | カーソルが離されたときに発行 |
| "mousemove" | カーソルが動いたときに発行 |
| "touchstart" | タッチが開始したとき発行 |
| "touchmove" | タッチしたまま移動しているときに発行 |
| "touchend" | タッチが終了したとき発行 その他、"touchcancel","gesturestart","gesturechange","gestureend"も対応デバイスで発行 |
Copyright (C) 2011-2017 akira igarashi (UNIZONBEX) All Rights Reserved.