Canvas 画像表示オブジェクト

画像を描画するための表示オブジェクト。Canvasエレメントをラップしている。

記述例

var loader = new smart.Loader();
loader.load({
	a:"img/charA.png",
	b:"img/charB.png",
	c:"img/charC.png"
},function(files)
{
	var stage = new smart.Stage("demo2");
	var imgA = new smart.Canvas(60,60,files.a);
	imgA.x = 20;
	imgA.y = 20;
	stage.addChild(imgA);
	var imgB = new smart.Canvas(60,60,files.b);
	imgB.x = 100;
	imgB.y = 20;
	stage.addChild(imgB);
	var imgC = new smart.Canvas(60,60,files.c);
	imgC.x = 180;
	imgC.y = 20;
	stage.addChild(imgC);
});

プロトタイプ

Canvas → View → Binder

メソッド

new Canvas(width,height,[image])	Canvasオブジェクトを作成します。第1～2引数は幅と高さの指定。第3引数には、Imageエレメントを指定。省略時には、透明のキャンバスが作成される。第1引数にImageエレメントを指定すると、幅、高さを省略可能
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)	※暫定機能スタイルをオブジェクト形式で指定。
draw(image,[sX,sY,sW,sH,dX,dY,dW,dH])	キャンバスに画像を描画します。第二引数以降を指定すると、元画像の一部を描画したり、キャンバスの一部に描画したり、拡大や縮小して描画することが可能です。 sX → Image(元になる画像)の切り出しx位置（デフォルト0) sY → Image(元になる画像)の切り出しy位置（デフォルト 0) sW → Image(元になる画像)の切り出し幅（デフォルト Image.width) sH → Image(元になる画像)の切り出し高さ（デフォルト Image.height) dX → Canvasへの描画x座標（デフォルト0) dY → Canvasへの描画y座標（デフォルト0) dW → Canvasへの描画幅（デフォルト Canvas.width) dH → Canvasへの描画高さ（デフォルト Canvas.height)
clear()	キャンバスへの描画をクリアする。

プロパティ

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	幅をピクセルで指定、取得する。
height	Number	高さをピクセルで指定、取得する。
context	Object	読み取り専用。Canvasの"2d"コンテキストの参照。

イベント

"click"	自身をクリックときに発行
"mouseover"	カーソルが自身の領域に入ったときに発行
"mouseout"	カーソルが自身の領域から外れたときに発行
"mousedown"	カーソルが押されたときに発行
"mouseup"	カーソルが離されたときに発行
"mousemove"	カーソルが動いたときに発行
"touchstart"	タッチが開始したとき発行
"touchmove"	タッチしたまま移動しているときに発行
"touchend"	タッチが終了したとき発行その他、"touchcancel","gesturestart","gesturechange","gestureend"も対応デバイスで発行

TOP

スマホ対応アニメーション支援ライブラリ

Canvas 画像表示オブジェクト