擬似Imageオブジェクト

div要素とスタイルシートを組み合わせてImageオブジェクトっぽいものを作ってみた。

imgobj.js

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

なんで新しく作るのさ!?

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

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

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

使い方

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

基本

<script type="text/javascript" src="imgobj.js"></script>の記述をhead要素内なりなんなりにしておく。

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

実行結果

応用

この擬似Imageオブジェクトならこういうことができるぜ、という一例を示しておく

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()
画像を表示する。