在自定义 Flex 组件中绘制叠加层

如何在 Flex 中创建一个自定义 MXML 组件，该组件基于现有组件，但在某些情况下会在该现有组件上绘制覆盖层。

理想情况下，新组件应该基于（派生自）现有组件，以便现有组件的出现可以用新组件替换。

我尝试在新组件中重写 updateDisplayList() 并使用 this.graphics 绘制覆盖层。这导致覆盖层被绘制在现有组件的子组件下方。我还尝试在收到渲染事件时进行绘图，这会导致类似的结果。

当触发叠加层显示的外部条件发生变化时，我会在新组件上调用 invalidateDisplayList() 。这可以触发上述两种情况的绘图。剩下的问题似乎是弄清楚如何在添加所有其他组件后在它们之上进行绘制。

下面的例子应该说明我试图做的事情；当设置了 overrideEnabled 并调用了组件的 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>

另外，请随意提出不同的方法。

你必须添加一个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);
            }
        }

Edit:可用于将叠加层添加到显示列表的一个属性是rawchildren http://livedocs.adobe.com/flex/3/langref/mx/core/Container.html#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);
            }
        }
    }
}