0

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

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

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

4

2 回答 2

2

这是一个 Flex3 解决方案。

mx:Button在其内部具有作为子项的图标。您可以覆盖updateDisplayList函数和enabled设置器以使此图标变为黑白。

为了使图像成为黑白图像，您需要对颜色的 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

使用新过滤器重新分配数组很重要，否则组件不会更新它。

于 2011-09-10T07:22:07.783 回答
1

使用皮肤！在 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>
于 2011-09-10T01:00:12.307 回答