W2U開発wiki

• Canvasに描画されるオブジェクトの親クラス。ShapeとかBitmapが継承する。
• これ自体をインスタンス化することはない。

• 引数なし。

• 透明度。0が透明で、1に近づくほど不透明になる。
• デフォルトは1。

• キャッシュされたHTMLCanvasElement（キャッシュが有効の場合）。

• キャッシュを識別するための一意なID。

• 1つのDisplayObject内で描画範囲が重なったとき、重なった部分をどのように描画するかを指定する。
• 未指定の場合は、このオブジェクトを格納しているコンテナの値が使われる。
• 指定する値はhtml5.jpのページにある値。
• でも何も表示されなくなる値があるから間違ってるかも・・・。ブラウザの対応状況も結構違うっぽ。
• ↓サンプルソース（Stageの初期化部分、再描画部分などは省略）

    var shape1 = new Shape();
    shape1.alpha = 0.5; // 透明度0.5
    var g = shape1.graphics.clear(); 
    // 2つの描画範囲が重なる
    g.beginFill("#FF0").drawRoundRect(100, 100, 100, 100, 20);
    g.beginFill("#F00").drawRoundRect(120, 120, 100, 100, 20);

    shape1.compositeOperation = "★ここに指定する★";

• デフォルト設定(指定なし)

• destination-over

• DisplayObjectに適用するFilter?の配列。
• cache()またはupdateCache()メソッドを呼んだときにフィルタは適用・更新される。

• DisplayObjectに自動で振られるID。
• newした瞬間に設定される。

• ContainerクラスのgetObjectsUnderPoint(x, y)メソッドの対象にするかどうか。
• ↑のメソッドは、指定した地点の下にあるオブジェクト一覧を取得する。falseを指定すると一覧に含まれなくなる。
• デフォルトはtrue。

• オブジェクトに名前をつけることが出来る。デフォルトはnull。
• toString()メソッドでこの名前も一緒に文字列化されるので、デバッグに便利。

• このオブジェクトを格納している親コンテナorStageを返す。読み取り専用。
• まだどれにも格納されていなかったらnull。

• rotationまたはskewX, skewYプロパティでオブジェクトを回転させるときの中心点X座標を指定する。
• この座標はオブジェクトの左上座標からの相対位置。（デフォルトは0、つまり左上中心回転)

• regXプロパティのY座標バージョン。

• 回転する角度を指定する。右回り。１回転で360。

• 横方向に引き延ばす割合。2を指定すれば2倍横に伸びる。0.5で半分。

• 縦方向に引き延ばす割合。scaleXの縦バージョン。

• 影の設定。Shadowオブジェクトを設定する。
• nullを設定すると影を削除する。

shape.shadow = new Shadow("#000", 15, 15, 20); // 色は黒、15px右下にずらして、影の大きさは20px

• 横方向に歪める値・・・？下図参照。

• 縦方向に歪める値・・・？下図参照。

• skewX, skewYに0を指定したとき（デフォルト）

• skewX=30, skewY=0を指定したとき。どうも矢印の部分の角度を指定しているみたい。

• skewX=-30, skewY=0のとき。逆回転でゆがむ。

• skewY=30を指定したとき。矢印の部分を指定しているようです。

• skewX, Yに同じ値を設定すると歪みはなくなる。

• 90度以上で左右反転。下図はskewX=150を指定した様子。

Indicates whether the display object should have it's x & y position rounded prior to drawing it to stage. 
This only applies if the enclosing stage has snapPixelsEnabled set to true, 
and the display object's composite transform does not include any scaling, rotation, or skewing. 
The snapToPixel property is true by default for Bitmap and BitmapSequence instances, and false for all other display objects.

• わかりません・・・

• ローカル環境で動かしているとき、BitmapオブジェクトがonPress、onClickイベントの対象になっていると、エラーが起きるみたいです。
• trueにしておくとエラーが起きなくなる。デフォルトはfalse。
• staticなのでこう指定します。

DisplayObject.suppressCrossDomainErrors = true;

• ソース見ながら実際動かしてみると、本当にただ「エラーをthrowしないようにしているだけ」でした。なんじゃい。

// クリック時に呼ばれるDisplayObjectの_testHitメソッドの中身。クリックされた位置を取得しようとしている？
try {
    var hit = ctx.getImageData(0, 0, 1, 1).data[3] > 1;
} catch (e) {
    if (!DisplayObject.suppressCrossDomainErrors) { // ローカルで実行するとgetImageDataでエラーが発生する
        throw "An error has occured. This is most likely due to security restrictions on reading canvas pixel " +
              "data with local or cross-domain images.";
    }
}
return hit; // エラー時は何も入ってこないのでイベント起こらず・・・

• Bitmapオブジェクトのクリックイベント時にエラーが発生しているのは変わらず、どっちにしろイベントが発生しません。(Chromeだけかもしれません)
• ローカル環境以外ではちゃんとイベントが起こります。

• Chromeの起動オプションに--allow-file-access-from-filesを指定する。参考→http://blog.tm-labo.com/2010/06/chromejqueryload.h...
• 他のブラウザでもエラーが起きてたらたぶん回避策はあると思うんでなんとかやってください・・・

• オブジェクトを表示するかどうか。falseを設定するとContainerクラスのgetObjectsUnderPoint(x, y)メソッドの対象にもならない。
• もちろんデフォルトはtrue。

• 親コンテナからの相対位置X座標

• 親コンテナからの相対位置Y座標

• 自分自身の内部をキャッシュして再描画の負荷を下げる。
• キャッシュした範囲は普通に再描画(stage.update()とか)しても変わらなくなる。キャッシュした部分を再描画したいならupdateCache()メソッドを呼ぶ。
• 引数のx, y, width, heightは自身の左上座標からの相対値。circleの場合は中央から。
• 実際動かして試してない。

• 自分自身のクローンを作って返す。

• stage.update();を使わずにCanavasに描画する。ただし、visible, alpha, shadow, transformプロパティは使えない？
• 第一引数にCanvasのコンテキスト、第二引数にキャッシュを無視するかどうかを指定する。

Returns a data URL for the cache, or null if this display object is not cached. 
Uses cacheID to ensure a new data URL is not generated if the cache has not changed.

• わかりませんぬ。
• キャッシュされたデータへのURLを返す？でも返り値がvoidになっている。

Generates a concatenated Matrix2D object representing the combined transform of the display object 
and all of its parent Containers up to the highest level ancestor (usually the stage). 
This can be used to transform positions between coordinate spaces, such as with localToGlobal and globalToLocal.

• わかりませんぬ。

• Stageを返す。まだStageに格納されていなければnull。

• localToGlobalメソッドの逆。
• Stage上でのX、Y座標を引数に渡すと、自分自身の左上からの相対座標を返す。
• 返り値の型はPoint?。

• 自分自身の左上からの相対座標を引数に渡すと、その座標部分に何か描画されているかを返す。
• つまり透明な部分の座標を指定するとfalseが返る。Shadowは含まない。
• globalToLocalメソッドと渡す座標の意味が違うので注意。

• 自分自身が表示されているかどうか。
• visibleプロパティがfalseだったりalphaが0だったりするとfalseが返ってくる。
• 表示されてる時はtrueが返ってきそうだけど、実際はオブジェクトが返ってくる（内容は継承したクラスによって違う）。注意。
• Stageに追加されているかどうかは関係ない。

• globalToLocalメソッドの逆。
• 自分自身の左上からの相対座標を引数に渡すと、Stage上でのX、Y座標を示すPoint?オブジェクトを返す。
• このメソッドの返り値＋CanvasのoffsetがHTML上でのabsoluteな位置になる。サンプル→http://easeljs.com/examples/localToGlobal.html

• targetにはDisplayObjectを指定する。
• 自分自身の左上からの相対座標の位置を、targetからの相対位置に変換して返す。

• 文字列化する。型名とnameプロパティの値しか返さない。
• たぶんデバッグ用。

• キャッシュの使い方がよく分からないので保留。

Clears the current cache. See cache() for more information.

• キャッシュの使い方がよく分からないので保留。

Redraws the display object to its cache. Calling updateCache without an active cache will throw an error. 
If compositeOperation is null the current cache will be cleared prior to drawing. 
Otherwise the display object will be drawn over the existing cache using the specified compositeOperation.

• 引数に渡す文字列はcompositeOperationプロパティの項目参照。

• mouseEnabledがfalseだったりalphaが0だったりすると、とイベントが起きない模様。
• ※親のContainerにイベントを設定すると、子で設定したイベントが無効になる。
• Stageイベントとは共存できる。
• イベント確認ページ作りました。

• メソッドを書き換えておくと、オブジェクトがクリックされた時に呼び出される。
• 引数のeventにはMouseEventオブジェクトが入る。

    shape1.onClick = function(ev){
    	var x = ev.stageX;  // Stage上でのマウス位置X
    	var y = ev.stageY;  // Stage上でのマウス位置Y
    	var type = ev.type; // イベントの種類。ここでは"onClick"
    };

• メソッドを書き換えておくと、オブジェクトからマウスが離れた時に呼び出される。
• StageクラスのenableMouseOverメソッドを呼んでおかないとイベントが発生しない。
• event引数についてはonClickイベント参照。

• メソッドを書き換えておくと、オブジェクト上でマウスが動いた時に呼び出される。
• StageクラスのenableMouseOverメソッドを呼んでおかないとイベントが発生しない。
• event引数についてはonClickイベント参照。

• メソッドを書き換えておくと、オブジェクト上でマウスが押された時に呼び出される。
• event引数についてはonClickイベント参照。