- 概要
- コンストラクタ
- プロパティ
- alpha -Number
- cacheCanvas -HTMLCanvasElement
- cacheID - Number
- compositeOperation - String
- filters - Array[Filter]
- id - Number
- mouseEnabled - Boolean
- name - String
- parent - DisplayObject
- regX - Number
- regY - Number
- rotation - Number
- scaleX - Number
- scaleY - Number
- shadow - Shadow
- skewX - Number
- skewY - Number
- snapToPixel - Boolean
- suppressCrossDomainErrors (static) - Boolean
- visible - Boolean
- x - Number
- y - Number
- メソッド
- cache( x , y , width , height ) - void
- clone() - DisplayObject
- draw ( ctx , ignoreCache ) - void
- getCacheDataURL( ) - void
- getConcatenatedMatrix( mtx )
- getStage() - Stage
- globalToLocal(x, y) - Point
- hitTest(x, y) - Boolean
- isVisible() - Boolean
- localToGlobal(x, y) - Point
- localToLocal(x, y, target) - Point
- toString() - String
- uncache() - void
- updateCache(compositeOperation) - void
- イベント
http://easeljs.com/docs/DisplayObject.html
- 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 = "★ここに指定する★";
- デフォルト設定(指定なし)
![](https://image01.seesaawiki.jp/w/v/w2u_dev/4dd27b9b2e7f7431.png)
- destination-over
![](https://image01.seesaawiki.jp/w/v/w2u_dev/25091734fa356b8d.png)
- DisplayObjectに適用するFilter?の配列。
- cache()またはupdateCache()メソッドを呼んだときにフィルタは適用・更新される。
- ContainerクラスのgetObjectsUnderPoint(x, y)メソッドの対象にするかどうか。
- ↑のメソッドは、指定した地点の下にあるオブジェクト一覧を取得する。falseを指定すると一覧に含まれなくなる。
- デフォルトはtrue。
- このオブジェクトを格納している親コンテナorStageを返す。読み取り専用。
- まだどれにも格納されていなかったらnull。
- rotationまたはskewX, skewYプロパティでオブジェクトを回転させるときの中心点X座標を指定する。
- この座標はオブジェクトの左上座標からの相対位置。(デフォルトは0、つまり左上中心回転)
- 影の設定。Shadowオブジェクトを設定する。
- nullを設定すると影を削除する。
shape.shadow = new Shadow("#000", 15, 15, 20); // 色は黒、15px右下にずらして、影の大きさは20px
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。
- 自分自身の内部をキャッシュして再描画の負荷を下げる。
- キャッシュした範囲は普通に再描画(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。
- 自分自身の左上からの相対座標を引数に渡すと、その座標部分に何か描画されているかを返す。
- つまり透明な部分の座標を指定すると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からの相対位置に変換して返す。
- キャッシュの使い方がよく分からないので保留。
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プロパティの項目参照。
- メソッドを書き換えておくと、オブジェクトがクリックされた時に呼び出される。
- 引数の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イベント参照。
このページへのコメント
1jfsQb <a href="http://wkmnbfjsugpo.com/">wkmnbfjsugpo</a>, [url=http://ixupdyomezul.com/]ixupdyomezul[/url], [link=http://nxidfjzheosf.com/]nxidfjzheosf[/link], http://xiuptbpppwkp.com/
mbq0UX <a href="http://qyjafpzjuoih.com/">qyjafpzjuoih</a>, [url=http://zmsxlngtvxud.com/]zmsxlngtvxud[/url], [link=http://oyqqpofqrjfk.com/]oyqqpofqrjfk[/link], http://rxiizptcbumu.com/