Adobe Flex Button 图标 — 更改为灰度并返回

Question

到目前为止，我对禁用按钮图标的解决方案是使用第二个灰度图标，并根据按钮的启用值交换图标。显然这是非常hackish的。

我想深入了解按钮的图标，并在禁用按钮时应用某种灰度过滤器，并在重新启用按钮时删除过滤器。我尝试了一些方法，但我对 Flash 图形了解不够，无法真正了解该怎么做。

有人能给我一些指点吗？理想情况下，我想要一个 Flex 3 解决方案（因为我的大多数应用程序仍然是 mx/spark 混合的），但 Flex 4 也可以。

Answer 1

这是 Flex3 解决方案。

mx:Button 其内部有一个子图标。您可以覆盖 updateDisplayList 函数和 enabled setter 以使该图标变为黑白。

为了使图像变成黑白图像，您需要对颜色的 RGB 值进行平均。以下是广播和电视的公式：

grey = R * 0.3 + b2 * 0.59 + b3 * 0.11

在您的情况下，您可以使用 flash.filters.ColorMatrixFilter，此滤镜会转换目标的颜色。滤镜的黑白矩阵：

[ 0.3, 0.59, 0.11, 0,
  0.3, 0.59, 0.11, 0,
  0.3, 0.59, 0.11, 0,
  0,   0,    1,    0 ]

最后一列指定每种颜色的被加数，因此您可以使图像更红、更绿、棕褐色等。

滤镜应用于显示组件，如下所示：

var filter = Filter();
component.filters.push(filter); // doesn't work, and not because null pointer
component.filters = [filter];   // works

重新分配很重要包含新过滤器的数组，否则组件将不会更新它。

Answer 2

使用皮肤！在 Flex 4 中，他们通过皮肤文件使这变得更加容易，并且能够放置每个状态属性。这是我们的一个有点相似，基本上使用状态和过滤器来改变效果：

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" width="28" height="28" xmlns:Common="UI.Common.*" xmlns:Controls="Core.Flex.Controls.*">
    <fx:Metadata>[HostComponent("Core.Flex.Controls.ToggleIcon")]</fx:Metadata>
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>

    <s:Group left="2" right="2" top="2" bottom="2" useHandCursor="true" buttonMode="true">
        <Controls:ColorRect width="24" height="24" FillColor="#154b6b" StrokeColor="#FFFFFF" StrokeWeight=".1" alpha=".8" radiusX="6" radiusY="6" includeIn="up, disabled">
            <Controls:filters>
                <s:BevelFilter blurX="5" blurY="5" strength=".56" quality="3" distance="3"/>
            </Controls:filters>
        </Controls:ColorRect>

        <Controls:ColorRect width="24" height="24" FillColor="#1C648E" StrokeColor="#FFFFFF" StrokeWeight="2" radiusX="6" radiusY="6" includeIn="over">
            <Controls:filters>
                <s:BevelFilter blurX="5" blurY="5" strength=".87" quality="3" distance="3"/>
            </Controls:filters>
        </Controls:ColorRect>

        <Controls:ColorRect width="24" height="24" FillColor="#154b6b" StrokeColor="#FFFFFF" StrokeWeight=".1" radiusX="6" radiusY="6" includeIn="down, selectedStates">
            <Controls:filters>
                <s:BevelFilter blurX="5" blurY="5" strength=".1" quality="3" highlightColor="#000000" distance="3"/>
            </Controls:filters>
        </Controls:ColorRect>

        <s:BitmapImage source="{hostComponent.Icon}" left="2" top="2" right="2" bottom="2" alpha=".9" alpha.over="1" alpha.selectedStates="1"/>
    </s:Group>

</s:SparkSkin>