W2U開発wiki - EaselJS -Container

http://easeljs.com/docs/Container.html

概要

  • DisplayObjectをまとめるためのクラス。
  • Containerのプロパティが子のDisplayObjectにも影響を与える。
    • 例)x=100alpha=0.5のDisplayObjectを、 x=50alpha=0.7のContainerに格納する
      • →DisplayObjectのCanvas上での表示位置がx=150alpha=0.35になる。
      • ※DisplayObjectのプロパティ値が変わったわけではなく、Containerのプロパティとの合成結果がそう見えるようになる、というだけ。
  • Container自身もContainerに格納できる。DisplayObjectのサブクラスだもの。
  • Stageがこのクラスを継承してます。

コンストラクタ

  • 引数なし。

プロパティ

children - Array[DisplayObject]


メソッド

addChild( child ) - DisplayObject

  • DisplayObjectを追加する。カンマで区切っていくらでも追加できる。
container.addChild(shape1, shape2, ・・・);
  • 返り値は追加したDisplayObject。複数追加したときは最後のやつ。

addChildAt( child , index ) - DisplayObject

  • 指定したインデックス位置に、DisplayObjectを挿入する。指定した位置以降のDisplayObjectは後ろにずらされる。
  • 先に追加したDisplayObjectから表示されるので、表示順制御に使えるね。
  • ある特定のDisplayObjectのインデックス位置が知りたいときは、getChildIndexメソッドを使うべし。
var container = new Container();
container.addChild(shape1);
container.addChild(shape2);
container.addChildAt(shape3,container.getChildIndex(shape2)); // shape3をshape2の1つ前に突っ込む
  • これもaddChildと同じように、複数のDisplayObjectを突っ込める。最後の引数がインデックス位置。
  • 返り値は追加したDisplayObject。複数追加したときは最後のやつ。

clone( recursive ) - Container

  • コンテナのクローンを作る。
  • 引数にtrueを指定すると、子のDisplayObjectもコピーされる。

contains( child ) - Boolean

  • 指定したDisplayObjectが子に含まれているかを返す。
  • 子だけではなく、孫以降のDisplayObjectに含まれていてもtrue。
var container1 = new Container();
var container2 = new Container();
container1.addChild(container2); // コンテナ2をコンテナ1の子にする
container2.addChild(shape1);     // shape1をコンテナ2の子にする
var flag = container.contains(shape2);  // true

draw( ctx, ignoreCache ) - void

  • Stageに含まれない状態でもコンテナに含まれる子のDisplayObjectを描画できる。
  • DisplayObjectの同名メソッドとやってることは同じ。

getChildAt( index ) - DisplayObject

  • 指定したインデックス位置にあるDisplayObjectを返す。

getChildIndex( child ) - Number

  • 指定したDisplayObjectがどのインデックス位置にあるかを返す。
  • 使い方はaddChildAtメソッドのところで書いたサンプルで。

getNumChildren( ) - Number

  • 子のDisplayObjectの数。

getObjectsUnderPoint( x, y ) - Array[DisplayObject]

  • 指定した座標の位置にある、子のDisplayObjectの配列を返す。この座標はコンテナの左上座標が原点。
  • 配列の順番は、上に表示されている順。
  • 子のDisplayObjectのmouseEnabledプロパティがfalseなら配列に含まれない。
  • 負荷が高いそうなので取扱注意。

getObjectUnderPoint( x, y ) - DisplayObject

  • getObjectsUnderPointメソッドに似ているが、これは一番上のDisplayObjectのみ返す。

hitTest( x, y ) - Boolean

  • DisplayObjectと同じ。チェック対象が子のDisplayObjectになる。

isVisible( ) - Boolean

  • コンテナが表示されているかどうか。visibleプロパティがfalseだったり、alphaが0だったりするとfalseが返る。
  • 子の表示状態は関係ないようです。

removeAllChildren( ) - void

  • 全ての子を削除する。

removeChild( child ) - Boolean

  • コンテナから引数の子DisplayObjectを削除する。
  • カンマで区切っていくつでも指定可能。addChildメソッドの例参照。
  • 引数のDisplayObjectが全て存在すればtrue、存在しないchildが1つでも指定されていればfalseを返す。

removeChildAt( index ) - Boolean

  • コンテナから引数のインデックスの子DisplayObjectを削除する。
  • これもremoveChildと同じく、カンマで区切っていくつでも指定可能。返り値もremoveChildと同じ感じ。

sortChildren ( sortFunction ) - void

  • 子DisplayObjectを、引数の関数の方法でソートする。
  • Array.sortメソッドに渡す関数と同じような書き方でOK。
container1.sortChildren(function(obj1, obj2){
    return obj2.x - obj1.x; // X座標が大きい順にソート
});

toString( ) - String

  • 文字列化する。DisplayObjectの同名メソッドと同じ

イベント