Flex:修改嵌入式图标并在按钮中使用它?

时间:2020-03-06 15:00:13  来源:igfitidea点击:

就是这样,如果我们嵌入图标:

[Embed(source='icons/checkmark.png')]
private static var CheckMark:Class;

我们最终得到一个动态的类。我们可以在运行时通过调用setStyle方法轻松地将图标分配给按钮:

var btn:Button = new Button();
btn.setStyle("icon", CheckMark);

但是,如果我们想在运行时更改图标,例如将其Alpha值更改甚至重绘像素,然后再将其分配给按钮,该怎么办?

到目前为止,我找不到令人满意的答案...

解决方案

这是我能找到的唯一接近的答案:动态图标(带有"查看源代码"的示例)

他的解决方案涉及在按钮的图标设置中使用的自定义" DynamicIcon"类,以及在Button类中添加一种方法以绘制动态图标的自定义Button类。

最终结果是我们可以将BitmapData发送到DynamicIcon类,该类将显示在按钮中。因此,嵌入图像,实例化资产类,获取bitmapasset并对其进行修改,但是我们需要将bitmapData并将其发送到图标。

这是一个有趣的问题,似乎应该有一个更简单的解决方案,但是这样做没有很多麻烦。

我要解决的方法是实现一个程序化皮肤类,该类可以手动绘制图标本身。我们可能还需要做更多的工作,以确保按钮计算出正确的大小,就好像它有一个图标一样,即使它没有图标也是如此。我们可能需要翻阅Button源代码,以查看如何存储对图标的引用。

我喜欢仅创建完全符合我的需求的程序化外观,然后使用有趣的CSS声明来修改状态,例如:

button.setStyle("customIconAlpha", .4);

然后,当然,外观或者自定义按钮类将具有:

var alpha:Number = getStyle("customIconAlpha") as Number;

(不确定是否必须键入该内容)

我发现程序化皮肤的最大问题是按钮拒绝测量宽度/高度。通过覆盖每个方法的get方法,我很容易地解决了这个问题:

重写公共函数get width():Number {return WIDTH; }
重写公共函数get height():Number {return HEIGHT; }

就我而言,我需要在TabNavigator中修改按钮,因此没有简单的方法可以将按钮子类化。幸运的是,每个外观的父级都是按钮,因此可以使用外观中的静态方法来标识图标外观所属的Button实例。

如果我们使用全部"图标"样式,则将为每个状态创建一个新的外观对象。因此,在更改图标状态时,需要牢记这一点。