|
ImageLoaderクラス
|
|
継承
|
ImageLoader → AbstractLoader → EventDispatcher → Object
|
|
ディレクトリ
|
preloadjs/loaders
|
| ImageLoader()コンストラクタ |
|
文法
|
ImageLoader(loadItem, preferXHR) |
|
概要
|
ImageLoaderインスタンスをつくる。
|
|
引数
|
loadItem − 読込むファイルを示すオブジェクトまたはパスで、つぎのいずれかのデータ。
- LoadItemオブジェクト
- LoadItemクラスの定めるプロパティをもつオブジェクト
- パスを示す文字列
preferXHR − インスタンスが読込みにXHR(XML HTTP Requests)とHTMLタグのどちらを使うか定めるブール値。falseの場合、キューは可能ならタグを使って読込み、必要があればXHRに切替える。
|
|
load()メソッド |
|
文法
|
load() |
|
概要
|
項目の読込みを始める。
|
|
引数
|
なし。
|
|
戻り値
|
なし。
|
|
ImageLoader.canLoadItem()メソッド |
|
文法
|
ImageLoader.canLoadItem(item) |
|
概要
|
[静的] 引数の項目が読込めるかどうかをブール値で返す。ImageLoaderオブジェクトが読込めるのは、AbstractLoader.IMAGE定数で表されるイメージのみ[*1]。
|
|
引数
|
item − ImageLoaderクラスで読込もうとする項目のLoadItemまたはそれと同じプロパティをもつオブジェクト。
|
|
戻り値
|
項目が読込めるかどうかを示すブール値。
|
説明
ImageLoaderクラスは、イメージファイルを読込みます。コンストラクタで、読込むファイルとXML HTTP Requestsの要否を定めます。そして、読込み始めるには、ImageLoader.load()メソッドを呼出さなければなりません。読込み終えたときはAbstractLoader.completeイベントが送られるので、リスナー関数を定めて後処理を扱います。
読込むのが予めイメージファイルと決まっているのであれば、LoadQueueクラスよりImageLoaderクラスを使う方が負荷は軽くなります。LoadQueueクラスには、読込むコンテンツに応じてローダーのクラスを選ぶ手間が加わるからです。
例
つぎのコードは、変数(file)に定めたイメージファイルをImageLoaderクラスで読込み、ロードし終えるとリスナー関数(draw())を呼出します[*2]。
|
var loader = new createjs.ImageLoader(file);
loader.addEventListener("complete", draw);
loader.load();
|
以下のコード001は、初期設定の関数(initialize())を呼出すと、ImageLoaderクラスでイメージファイル(file)を読込みます(第7〜9行目)。そして、AbstractLoader.completeイベントのリスナー関数(draw())が、読込んだイメージの幅と高さを調べて、Bitmapインスタンス(myBitmap)の基準点が中央になるように位置調整します(第20〜22行目)。すると、読込んだ画像がステージの真ん中に表示されます(図001)。ご参考までに、併せてjsdo.itにもコードを掲げます(サンプル001)。
図001■読込んだ画像がステージの真ん中に表示された
コード001■ImageLoaderクラスで読込んだイメージをステージの真ん中に表示する
- var stage;
- var myBitmap;
- var file = "images/Pen.png";
- function initialize() {
- var canvasElement = document.getElementById("myCanvas");
- stage = new createjs.Stage(canvasElement);
- var loader = new createjs.ImageLoader(file);
- loader.addEventListener("complete", draw);
- loader.load();
- myBitmap = new createjs.Bitmap(file);
- setAppearance(myBitmap, canvasElement.width / 2, canvasElement.height / 2);
- }
- function setAppearance(instance, nX, nY) {
- instance.x = nX;
- instance.y = nY;
- stage.addChild(instance);
- }
- function draw(eventObject) {
- console.log(eventObject);
- var myImage = myBitmap.image;
- myBitmap.regX = myImage.width / 2;
- myBitmap.regY = myImage.height / 2;
- stage.update();
- }
|
サンプル001■EaselJS 0.8.0: Loading a image with the ImageLoader
|
[*1] ImageLoader.canLoadItem()メソッドの実装は、つぎのように引数のオブジェクトのtypeプロパティが定数AbstractLoader.IMAGEと等しいかどうかを返しているだけです。
|
ImageLoader.canLoadItem = function (item) {
return item.type == createjs.AbstractLoader.IMAGE;
};
|
Graphicsコマンドオブジェクトを備えたことにより、Graphics APIの処理が統一化されたといえます。
[*2] LoadQueueクラスで行っていたイメージファイルの読込みをImageLoaderクラスに置き替えるときは、つぎのように書直します。なお、LoadQueueクラスを使っても、ファイルは正しく読込めます。
|
// var loader = new createjs.LoadQueue(false);
var loader = new createjs.ImageLoader(file);
// loader.addEventListener("fileload", draw);
loader.addEventListener("complete", draw);
// loader.loadFile(file);
loader.load();
|
|
作成者: 野中文雄
作成日: 2014年12月17日
