前回に引き続き今回も EaselJS を朧げに使ってみたいと思います。

EaselJS もまたクラスの集合です。公式ドキュメントを見るとクラスはいっぱいあって、一気に全部やるのは大変そうなので、まずは前回も使った Shape Class から探ってみようかと思います。

Shape Class は現段階で以下のプロパティとメソッドがあるみたいです。

もやもやしながらまとめていってるだけなので正確な情報は公式文書を参照してください。

Shape Class

Properties
alpha 透明度
cacheID cache メソッドで作成されたキャッシュの識別子
compositeOperation 画像の合成方法
cursor マウスカーソルの形
filters かかっているフィルター
graphics こいつから drawRect のなどの描画メソッドを呼べます
hitArea マウスの反応する座標空間
id オブジェクトの識別子
mask かかっているマスク
mouseEnabled マウスイベントを受け取るか
name オブジェクトの名前
parent 親オブジェクト
regX オブジェクトの x 座標の基準点
regY オブジェクトの y 座標の基準点
rotation 回転角度
scaleX x 座標のスケール
scaleY y 座標のスケール
shadow
skewX x 座標の傾斜
skewY y 座標の傾斜
snapToPixel
stage ステージのインスタンス
tickEnabled false にすると tick イベントが送られなくなる
transformMatrix 行列を使った変形
visible 見えてるか見えてないか
x x 座標
y y 座標
Method
addEventtdstener( type, tdstener, [useCapture] ) Shape のインスタンスのイベントを監視
cache( x, y, width, height, [scale=1] ) オブジェクトをキャッシュ
clone( recursive ) クローンを作成
draw( ctx, [ignoreCache=false] )
getBounds() オブジェクトの境界を取得
getCacheDataURL() cache の data URL を取得
getConcatenatedDisplayProps ( [matrix] ) 描画されているオブジェクトのプロパティをまとめて取得
getConcatenatedMatrix ( [matrix] )
getMatrix()
getStage() 描画されているステージのインスタンスを取得
getTransformedBounds() 変形のかかった境界線が取得
globalToLocal( x, y, [pt] )
hasEventtdstener( type ) イベントリスナーの有無を取得
hitTest( x, y ) 衝突判定
isVisible() 描画されているか
localToGlobal( x, y, [pt] )
localToLocal( x, y, target, [pt] )
off( type, tdstener, [useCapture] ) イベントリスナーを削除
on( type, tdstener, [scope], [once=false], [data], [useCapture=false] ) イベントリスナーを追加
removeAllEventtdsteners( [type] ) イベントリスナーを全て削除
removeEventtdstener( type, tdstener, [useCapture] ) イベントリスナーを削除
set( props ) プロパティをセット
setBounds( x, y, width, height ) 境界をセット
setTransform( [x=0], [y=0], [scaleX=1], [scaleY=1], [rotation=0], [skewX=0], [skewY=0], [regX=0], [regY=0] ) 変形を行列でセット
toString()
uncache() キャッシュを削除
updateCache( compositeOperation ) キャッシュを更新
updateContext( ctx )
willTrigger( type ) オブジェクトまたはその祖先にひとつ以上のリスナーがあるかどうかを判定

全くわからないのはスルーしました。それでは実際に操作してみてプロパティの変化を見てみます

propertyvalue