擬似Imageオブジェクト

とりあえずコードを晒しとく。パブリックドメインでおｋ。

• imgobj.js

なんとなくなんでもかんでもDOMで済ませたいという考えが根底にあった。が、それ以外にも一応利点はある。

• スタイルシートなら細かい制御が利く。（z-index,画像のオフセットなど。）
• 特に画像のオフセットをやりくりすれば一枚の画像ファイルから複数のパターンの画像を出力できる。（のち応用で示す。）

利点があれば欠点もあるわけで、

• 画像の縮尺変更ができない。(原寸でしか表示できない)
• 画像ロード関連のイベント処理ができない。

といった感じ。JavaScriptでゲームを作ろう、といった状況を想定して作ったものなんでやや用途を選ぶかも。

imgobj.jsを読み込む→コンストラクタでオブジェクト生成→メソッド実行というのがおおよその使い方。コンストラクタやメソッドの詳細は後述。

var img = new createImage("test.png",100,100);//オブジェクト生成。画像表示枠は100x100ピクセル
img.setX(50);//メソッド実行。ここではX方向に50ピクセル動かしている。

var img1 = new createImage("test2.png",50,50);//オブジェクト生成。
var img2 = new createImage("test2.png",50,50);//オブジェクト生成。
img2.setX(50);//img2をX方向に50ピクセルずらす。
img2.setY(50);//img2をY方向に50ピクセルずらす。
img2.setOffsetX(50);//img2のオフセットをX方向に50ピクセルずらす。

基本的にプロパティはprivate変数にしているのでプロパティ変更はset〜()で行う。

コンストラクタ

createImage( _imagefile, _width, _height, _x, _y, _z, _offsetX, _offsetY )

擬似Imageオブジェクトを生成、戻り値として返す。

_imagefile,_width,_heightは必須の引数。これ以外の引数は省略可。

_imagefile

表示する画像ファイルを指定。文字列。

_width

画像の表示枠の幅をピクセル単位で指定。自然数。

指定した幅が画像ファイルの幅より大きい場合、あふれた部分は余白(透明)となる。逆に指定した幅が画像ファイルの幅より小さい場合、指定した幅までしか表示されない。

つまり画像の伸縮が行われるわけではない。

_height

画像の表示枠の高さをピクセル単位で指定。自然数。

指定した高さが画像ファイルの高さより大きい場合、あふれた部分は余白(透明)となる。逆に指定した高さが画像ファイルの高さより小さい場合、指定した高さまでしか表示されない。

つまり画像の伸縮が行われるわけではない。

_x

ブラウザ表示枠の左上を原点としたときの画像のX座標。デフォルトは0。ピクセル単位で指定する。自然数または0。

_y

ブラウザ表示枠の左上を原点としたときの画像のY座標。デフォルトは0。ピクセル単位で指定する。自然数または0。

_z

画像のz-indexを指定。デフォルトは0。自然数または0。

数値が大きくなるほど手前に表示される。

_offsetX

画像の表示開始位置のX座標。デフォルトは0。ピクセル単位で指定。自然数または0。

_offsetY

画像の表示開始位置のY座標。デフォルトは0。ピクセル単位で指定。自然数または0。

getter系

getWidth()

画像の表示枠の幅を返す。

getHeight()

画像の表示枠の高さを返す。

getX()

ブラウザ表示枠の左上を原点としたときの画像のX座標を返す。

getY()

ブラウザ表示枠の左上を原点としたときの画像のY座標を返す。

getZ()

画像のz-indexを返す。

getOffsetX()

画像の表示開始位置のX座標を返す。

getOffsetY()

画像の表示開始位置のY座標を返す。

setter系

setWidth( _width )

画像の表示枠の幅をピクセル単位で指定。自然数。

setHeight( _height )

画像の表示枠の高さをピクセル単位で指定。自然数。

setX( _x )

ブラウザ表示枠の左上を原点としたときの画像のX座標をピクセル単位で指定。自然数または0。

setY( _y )

ブラウザ表示枠の左上を原点としたときの画像のY座標をピクセル単位で指定。自然数または0。

setZ( _z )

画像のz-indexを指定。自然数または0。

setOffsetX( _offsetX )

画像の表示開始位置のX座標をピクセル単位で指定。自然数または0。

setOffsetY( _offsetY )

画像の表示開始位置のY座標をピクセル単位で指定。自然数または0。

その他

とりあえず用意してみた、という程度のもの。今後拡張するかもしれない。消滅するかもしれない。

hide()

画像を表示しない。view()で再び表示される。

view()

画像を表示する。