 |
HTML5テクニカルノート
EaselJS 0.8.0: DisplayPropsクラス
| ID: FN1505003 |
Technique: HTML5 and JavaScript |
Library: EaselJS 0.8.0 |
|
DisplayPropsクラス
|
|
継承
|
DisplayProps → Object
|
|
ディレクトリ
|
easeljs/geom
|
|
DisplayProps()コンストラクタ
|
|
文法
|
DisplayProps(visible, alpha, shadow, compositeOperation, matrix)
|
|
概要
|
DisplayPropsインスタンスをつくる。
|
|
引数
|
visible − DisplayProps.visibleプロパティに定めるブール値。デフォルト値はtrue。
alpha − DisplayProps.alphaプロパティに定める数値。デフォルト値は1[*1]。
shadow − DisplayProps.shadowプロパティに定めるShadowオブジェクト。デフォルト値はundefinedもしくはnull。
compositeOperation − DisplayProps.compositeOperationプロパティに定める文字列。デフォルト値はundefinedもしくはnull[*2]。
matrix − DisplayProps.matrixプロパティに定めるMatrix2Dオブジェクト。デフォルト値は単位行列のオブジェクト。
|
|
append()メソッド
|
|
文法
|
append(visible, alpha, shadow, compositeOperation, matrix)
|
|
概要
|
引数の値をプロパティに後から加える。
|
|
引数
|
visible − DisplayProps.visibleプロパティに加えるブール値。
alpha − DisplayProps.alphaプロパティに加える数値。
shadow − DisplayProps.shadowプロパティに加えるShadowオブジェクト。
compositeOperation − DisplayProps.compositeOperationプロパティに加える文字列。
matrix − DisplayProps.matrixプロパティに加えるMatrix2Dオブジェクト。省略できる。
|
|
戻り値
|
参照したDisplayPropsインスタンス。
|
|
clone()メソッド
|
|
文法
|
clone()
|
|
概要
|
DisplayPropsインスタンスを複製して返す。DisplayProps.matrixプロパティのMatrix2Dオブジェクトも複製される。
|
|
引数
|
なし。
|
|
戻り値
|
複製されたDisplayPropsインスタンス。
|
|
identity()メソッド
|
|
文法
|
identity()
|
|
概要
|
DisplayPropsインスタンスのプロパティをデフォルト値に定め直す。
|
|
引数
|
なし。
|
|
戻り値
|
参照したDisplayPropsインスタンス。
|
|
prepend()メソッド
|
|
文法
|
prepend(visible, alpha, shadow, compositeOperation, matrix)
|
|
概要
|
引数の値をプロパティに前から加える。
|
|
引数
|
visible − DisplayProps.visibleプロパティに加えるブール値。
alpha − DisplayProps.alphaプロパティに加える数値。
shadow − DisplayProps.shadowプロパティに加えるShadowオブジェクト。
compositeOperation − DisplayProps.compositeOperationプロパティに加える文字列。
matrix − DisplayProps.matrixプロパティに加えるMatrix2Dオブジェクト。省略できる。
|
|
戻り値
|
参照したDisplayPropsインスタンス。
|
|
setValues()メソッド
|
|
文法
|
setValues(visible, alpha, shadow, compositeOperation, matrix)
|
|
概要
|
プロパティに引数の値を定める。
|
|
引数
|
visible − DisplayProps.visibleプロパティに定めるブール値。デフォルト値はtrue。
alpha − DisplayProps.alphaプロパティに定める数値。デフォルト値は1。
shadow − DisplayProps.shadowプロパティに定めるShadowオブジェクト。デフォルト値はundefinedもしくはnull。
compositeOperation − DisplayProps.compositeOperationプロパティに定める文字列。デフォルト値はundefinedもしくはnull[*2]。
matrix − DisplayProps.matrixプロパティに定めるMatrix2Dオブジェクト。デフォルト値は単位行列のオブジェクト。
|
|
戻り値
|
参照したDisplayPropsインスタンス。
|
|
alphaプロパティ
|
|
文法
|
DisplayPropsオブジェクト.alpha
|
|
プロパティ値
|
DisplayObject.alphaプロパティに対応するアルファを示す数値。
|
|
compositeOperationプロパティ
|
|
文法
|
DisplayPropsオブジェクト.compositeOperation
|
|
プロパティ値
|
DisplayObject.compositeOperationプロパティに対応するイメージの合成方法を示す文字列。
|
|
matrixプロパティ
|
|
文法
|
DisplayPropsオブジェクト.matrix
|
|
プロパティ値
|
DisplayObject.transformMatrixプロパティに対応する変換行列を示すMatrix2Dオブジェクト。
|
|
shadowプロパティ
|
|
文法
|
DisplayPropsオブジェクト.shadow
|
|
プロパティ値
|
DisplayObject.shadowプロパティに対応するシャドウを示すShadowオブジェクト。
|
|
visibleプロパティ
|
|
文法
|
DisplayPropsオブジェクト.visible
|
|
プロパティ値
|
DisplayObject.visibleプロパティに対応する表示の有無を示すブール値。
|
|
[*1] EaselJS 0.8.0のドキュメントは、DisplayProps()コンストラクタについて、引数alphaのデフォルト値を0と記載しています。けれど、内部的には引数値はすべてそのままDisplayProps.setValues()メソッドに渡されます。したがって、そのデフォルト値は1です。
|
function DisplayProps(visible, alpha, shadow, compositeOperation, matrix) {
this.setValues(visible, alpha, shadow, compositeOperation, matrix);
}
|
[*2] EaselJS 0.8.0では、DisplayProps.setValues()メソッドで、内部的に第4引数のcompositeOperationの値がDisplayProps.compositeOperationプロパティに正しく与えられません。そのため、値を定めたいときは、DisplayProps.compositeOperationプロパティに直に加えなければなりません。
前述注[*1]のとおり、DisplayProps()コンストラクタもDisplayProps.setValues()メソッドでプロパティ値を定めますので、同じ問題が生じます。
|
DisplayProps.prototype.setValues = function (visible, alpha, shadow, compositeOperation, matrix) {
this.compositeOperation = shadow;
return this;
};
|
[追記: 2015年6月1日] これらの問題は、EaselJS 0.8.1のつぎのバージョンで修正されます(VERSIONS.txtの「Version NEXT」の項に記載)。
|
|
DisplayObjectクラス
|
|
継承
|
DisplayObject → EventDispatcher → Object
|
|
ディレクトリ
|
easeljs/display
|
|
getConcatenatedDisplayProps()メソッド
|
|
文法
|
getConcatenatedDisplayProps(props)
|
|
概要
|
表示リストの頂点まで親オブジェクトを含めたプロパティ値を積算して、それらがプロパティとして納められたDisplayPropsインスタンスを返す。
|
|
引数
|
props − 積算した値のプロパティを納めるDisplayPropsインスタンス。省くと、新たなDisplayPropsインスタンスにプロパティが加えられる。
|
|
戻り値
|
積算したプロパティをもったDisplayPropsインスタンス。
|
説明
DisplayPropsは、EaselJS 0.8.0に新しく加わったクラスです。DisplayObjectインスタンスの表示に関わるプロパティ値の計算をまとめて扱うために用いられます。これまでは、Matrix2Dクラスの拡張された機能として、表示のためのプロパティを演算するメソッドやプロパティが備えられていました。しかし、EaselJS 0.8.0から、Matrix2Dクラスはもっぱら座標変換を担い、表示のプロパティはDisplayPropsクラスが扱うことになりました。
DisplayPropsが備える表示に関わるプロパティは、前掲の5つです。これまでのMatrix2Dクラスはvisibleプロパティをもっておらず、DisplayObject.visibleは新たに加わったプロパティといえます。オブジェクトを複製するDisplayObject.clone()やプロパティ値を改めるDisplayObject.setValues()メソッドは、geomパッケージの標準的な実装です。DisplayObject.identity()メソッドは、プロパティの定めにかかわらず、すべてデフォルト値に戻します。
なお、EaselJS 0.8.0では、前述注[*2]のとおり、コンストラクタやDisplayObject.setValues()メソッドを用いたのではDisplayProps.compositeOperationプロパティの値が定められません。値はプロパティに直に加えてください。
プロパティ値の演算をするメソッドとしては、DisplayProps.append()とDisplayProps.prepend()があります。Matrix2Dクラスの行列演算では乗算に交換法則があてはまらないため、後からかける(append)のか前からかける(prepend)のかによりメソッドが名づけられました。
しかし、DisplayProps.matrixプロパティ以外には行列演算がありませんので、DisplayPropsクラスのメソッドとしては前からか後からかという意味は薄れています。実際、ふたつのメソッドでDisplayProps.visibleとDisplayProps.alphaプロパティの扱いは変わりません。DisplayProps.shadowとDisplayProps.compositeOperationプロパティについては、DisplayProps.append()は引数があればその値で上書きし、DisplayProps.prepend()はすでに与えられたプロパティ値があるならそれを保ちます。
DisplayProps.matrixプロパティは行列ですので、ふたつのメソッドでMatrix2D.appendMatrix()とMatrix2D.prependMatrix()メソッドを使い分けて演算しています。
DisplayProps.append()メソッド
- visibleプロパティ =
- プロパティ値がtrueなら引数値
- プロパティ値がfalseならその値のまま
- alphaプロパティ *= 引数値
- shadowプロパティ =
- 引数のオブジェクトがあればその値
- 引数のオブジェクトがなければプロパティ値のまま
- compositeOperationプロパティ =
- 引数値があればその値
- 引数値がなければプロパティ値のまま
- matrixプロパティ =
DisplayProps.prepend()メソッド
- visibleプロパティ =
- プロパティ値がtrueなら引数値
- プロパティ値がfalseならその値のまま
- alphaプロパティ *= 引数値
- shadowプロパティ =
- すでにオブジェクト与えられていればその値のまま
- オブジェクトがまだ与えられていなければ引数値
- compositeOperationプロパティ =
- すでに値が与えられていればその値のまま
- まだ値が与えられていなければ引数値
- matrixプロパティ =
なお、DisplayObject.getConcatenatedDisplayProps()メソッドは、表示リストの頂点まで親オブジェクトを含めたプロパティ値を積算して、それらがプロパティとして納められたDisplayPropsインスタンスを返します。
例
DisplayProps.append()やDisplayProps.prepend()メソッドは、表示リストの親子間でプロパティ値を計算するために用いられることが多いでしょう。DisplayProps.append()メソッドを使うのは、子オブジェクトに与えるプロパティ値を親インスタンスから求めるときです。また、つぎの例は、子インスタンスに与えられるプロパティ値を、親インスタンスに遡って計算しています[*3]。
|
var o = myDisplayObject;
var props = new createjs.DisplayProps();
do {
// DisplayProps.prepend()メソッドで親オブジェクトのプロパティ値を順に加える
props.prepend(o.visible, o.alpha, o.shadow, o.compositeOperation, o.getMatrix());
} while (o = o.parent);
|
|
[*3] DisplayObject.getConcatenatedDisplayProps()メソッドの実装は、つぎのように基本的に同じ考え方で表示リストの頂点までのプロパティ値を積算しています。
|
DisplayObject.prototype.getConcatenatedDisplayProps = function(props) {
props = props ? props.identity() : new createjs.DisplayProps();
var o = this, mtx = o.getMatrix(props.matrix);
do {
props.prepend(o.visible, o.alpha, o.shadow, o.compositeOperation);
if (o != this) { mtx.prependMatrix(o.getMatrix(o._props.matrix)); }
} while (o = o.parent);
return props;
};
|
|
作成者: 野中文雄
更新日: 2015年6月1日 注[*2]に追記を加えた。
作成日: 2015年5月27日
Copyright ©
2001-2014 Fumio Nonaka. All rights reserved.
|
