サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

PreloadJS 0.6.0: ImageLoaderクラス

ID: FN1412005 Technique: HTML5 and JavaScript Library: PreloadJS 0.6.0

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

コード001■ImageLoaderクラスで読込んだイメージをステージの真ん中に表示する
  1. var stage;
  2. var myBitmap;
  3. var file = "images/Pen.png";
  4. function initialize() {
  5.   var canvasElement = document.getElementById("myCanvas");
  6.   stage = new createjs.Stage(canvasElement);
  7.   var loader = new createjs.ImageLoader(file);
  8.   loader.addEventListener("complete", draw);
  9.   loader.load();
  10.   myBitmap = new createjs.Bitmap(file);
  11.   setAppearance(myBitmap, canvasElement.width / 2, canvasElement.height / 2);
  12. }
  13. function setAppearance(instance, nX, nY) {
  14.   instance.x = nX;
  15.   instance.y = nY;
  16.   stage.addChild(instance);
  17. }
  18. function draw(eventObject) {
  19. console.log(eventObject);
  20.   var myImage = myBitmap.image;
  21.   myBitmap.regX = myImage.width / 2;
  22.   myBitmap.regY = myImage.height / 2;
  23.   stage.update();
  24. }

サンプル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日


Copyright © 2001-2014 Fumio Nonaka.  All rights reserved.