Flex: ¿Modificar un icono incrustado y usarlo en un botón?

Question

Solo eso, si incrusta un icono:

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

Terminas con una clase dinámica. Puede asignar fácilmente el icono a un botón en tiempo de ejecución llamando al método setStyle:

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

Pero, ¿qué sucede si desea modificar el icono en el tiempo de ejecución, como cambiar su valor alfa o incluso volver a dibujar píxeles, antes de asignarlo al botón?

Hasta ahora no puedo encontrar una respuesta satisfactoria ...

Answer 1

Esta es la única respuesta que pude encontrar que parecía cercana: Iconos dinámicos < a href = "http://blog.xsive.co.nz/flex_source/button_icon_drawing/ButtonTest.html" rel = "nofollow noreferrer"> (ejemplo con View Source)

Su solución involucra una personalizada " DynamicIcon " clase que se usa en la configuración del icono del botón, y una clase de botón personalizada que agrega un método a la clase del botón para dibujar iconos dinámicos.

El resultado final es que puede enviar BitmapData a la clase DynamicIcon, que aparecerá en el botón. Por lo tanto, incruste su imagen, cree una instancia de su clase de activos, obtenga el bitmapasset y modifíquelo según sea necesario y envíe el bitmapData al icono.

Es un problema interesante y parece que debería haber una solución más fácil, pero esto funciona sin muchos problemas.

Answer 2

La forma en que resolvería esto es implementar una clase de máscara programática que dibuje el ícono manualmente. Es probable que tengas que hacer más trabajo para asegurarte de que el botón calcula el tamaño correcto como si tuviera un ícono aunque no lo haga. Es posible que deba revisar el código fuente del botón para ver cómo se almacena la referencia al icono.

Me encanta simplemente crear skins programáticos que hacen exactamente lo que quiero y luego usar declaraciones CSS interesantes para modificar estados, por ejemplo:

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

y luego, por supuesto, la máscara o la clase de botón personalizado tendrían:

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

(no estoy seguro si tienes que encasillarlo)

Answer 3

El gran problema que encontré con los aspectos programáticos es que el botón se niega a medir el ancho / alto. Logré evitar esto al anular los métodos de obtención para cada uno:

anular la función pública get width (): Number {return WIDTH; } anular la función pública get height (): Number {return HEIGHT; }

En mi caso, necesitaba modificar botones en un TabNavigator, por lo tanto no es una forma fácil de subclasificar el botón. Afortunadamente, el elemento principal de cada máscara es el botón, por lo que al utilizar métodos estáticos dentro de su máscara, puede identificar la instancia del botón al que pertenecen las apariencias del icono.

Si está utilizando la carátula de todos " icono " estilo, se creará un nuevo objeto de máscara para cada estado. Por lo tanto, deberá tener esto en cuenta al cambiar el estado de los iconos.