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>

Adobe Flex Button图标 - 更改为灰度和背面

2 个答案: