用图形绘制的矩形出现在 BorderContainer 背景下方答案

【问题标题】：Rect drawn with graphics appear below background of BorderContainer用图形绘制的矩形出现在 BorderContainer 背景下方
【发布时间】：2011-12-20 06:20:36
【问题描述】：

在继承自 BorderContainer 的 Flex 组件中，我重写了 updateDisplayList 函数来绘制矩形：

override protected function updateDisplayList(unscaledWidth : Number, unscaledHeight : Number) : void
{
    this.graphics.clear();
    super.updateDisplayList(unscaledWidth, unscaledHeight); // If ommited the rect is shown properly
    drawRects(); // Just calls graphics.drawRoundedRect
}

问题是我绘制的矩形出现在容器的白色背景下方，而不是绘制在它的顶部。如果我删除对 super.updateDisplayList 的调用，我会看到正确绘制的矩形。我做错了什么？

【问题讨论】：

标签： apache-flex drawing

【解决方案1】：

在这里。似乎通过将绘图代码移动到我的组件的皮肤，一切都按预期工作。

【讨论】：

【解决方案2】：

是的，使用图形 API 将始终绘制到实际的精灵，低于一切。不使用图形，而是使用 Spark 基元，例如 Rect。

AS3：

var rect:Rect = new Rect();
rect.id = "backgroundRect";
rect.fill = new SolidColor();
rect.fill.color = 0xFFFFFF;
addElement(rect);

MXML：

<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
    <s:fill>
        <s:SolidColor color="#FFFFFF"/>
    </s:fill>
</s:Rect>

编辑：如果您不使用 Spark，那么我想一个解决方案是使用轻量级图形组件（抱歉含糊不清，我对 MX 的了解非常有限）并在该组件上使用图形 API。这样显示顺序应该可以工作。

【讨论】：

恐怕 Spark 不是一个选项。我需要非常快速地绘制数千个矩形。你想到了什么样的轻量级组件？
正如我所说，我不熟悉 MX 组件，但实现 IVisualElement 的最基本的显示对象就可以了。也许 mx:Container 或 mx:UIComponent ？
UIComponent 是最轻量级的组件。接下来，您将不得不处理 Flex 处理不佳的 Sprite。