2

既存のコンポーネントに基づいているが、特定の状況でこの既存のコンポーネントの上にオーバーレイを描画するカスタム MXML コンポーネントを flex で作成するにはどうすればよいでしょうか。

理想的には、新しいコンポーネントは既存のコンポーネントに基づく (派生する) べきであり、既存のコンポーネントのオカレンスを新しいコンポーネントと交換できるようにする必要があります。

新しいコンポーネントで updateDisplayList() をオーバーライドし、this.graphics を使用してオーバーレイをペイントしようとしました。これにより、既存のコンポーネントの子の下にオーバーレイが描画されました。また、同様の結果につながるレンダリングイベントを受け取ったときに描画を試みました。

オーバーレイの表示をトリガーする外部条件が変化したら、新しいコンポーネントで invalidateDisplayList() を呼び出します。これは、上記の両方のケースで描画をトリガーするために機能します。残りの問題は、他のすべてのコンポーネントが追加されたら、それらの上に描画する方法を理解することです。

次の例は、私が何をしようとしたかを示しています。overlayEnabled が設定され、コンポーネントの invalidateDisplayList() メソッドが呼び出されると、赤い四角形が背景に描画されます....

// NewComponent.mxml
<ExistingComponent ...>
    <mx:Script>
    ...

        public var overlayEnabled:Boolean;

        override protected updateDisplayList(...) {
            super.updateDisplayList(...)
            if (overlayEnabled) {
                var g:Graphics = this.graphics;     
                g.beginFill(0xFF0000, 0.5);
                g.drawRect(0, 0, width, height);
                g.endFill();
            }
        }
    ...
    </mx:Script>
</ExistingComponent>

また、さまざまなアプローチを自由に提案してください。

4

1 に答える 1

4

DisplayObjectあなたはオーバーレイを追加し、updateDisplayListそれが他の上に配置されていることを呼び出すときに保証する必要があります.

        public var overlayEnabled:Boolean;

        public overlayHolder:(whatever display object you want to use)

        override protected updateDisplayList(...) {
            super.updateDisplayList(...)
            if (overlayEnabled) {
                if (overlayHolder.parent != this){
                 addChild(overlayHolder);
                } else {
                  if (numChildren > 0)
                     setChildIndex(overlayHolder, numChildren-1);
                }
                var g:Graphics = overlayHolder.graphics;     
                g.beginFill(0xFF0000, 0.5);
                g.drawRect(0, 0, width, height);
                g.endFill();
            } else if (overlayHolder.parent == this) {
              removeChild(overlayHolder);
            }
        }

編集: オーバーレイを表示リストに追加するために使用できる1つのプロパティは次のrawchildrenとおりです。

package {
    import flash.display.Graphics;
    import flash.display.Sprite;

    import mx.containers.VBox;

    public class MyVBox extends VBox {
        public var overlayEnabled : Boolean = true;
        public var overlay : Sprite = new Sprite();

        public function MyVBox() {
            super();
        }

        protected override function updateDisplayList(unscaledWidth : Number, unscaledHeight : Number) : void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if (overlayEnabled) {
                if (overlay.parent != this) {
                    rawChildren.addChild(overlay);
                } else {
                    if (rawChildren.numChildren > 0)
                        rawChildren.setChildIndex(overlay, rawChildren.numChildren - 1);
                }
                var g : Graphics = overlay.graphics;
                g.beginFill(0xFF0000, 0.5);
                g.drawRect(0, 0, width, height);
                g.endFill();
            } else if (overlay.parent == this) {
                rawChildren.removeChild(overlay);
            }
        }
    }
}
于 2010-01-29T17:34:55.087 に答える