Flex: modificare un'icona incorporata e utilizzarla in un pulsante?

Question

Solo questo, se incorpori un'icona:

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

Si finisce con una classe dinamica. Puoi facilmente assegnare l'icona a un pulsante in fase di esecuzione chiamando il metodo setStyle:

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

Ma cosa succede se si desidera modificare l'icona in fase di esecuzione, come cambiando il suo valore alfa o anche ridisegnando i pixel, prima di assegnarlo al pulsante?

Finora non sono riuscito a trovare una risposta soddisfacente ...

Answer 1

Questa è l'unica risposta che mi è sembrata vicina: Icone dinamiche < a href = "http://blog.xsive.co.nz/flex_source/button_icon_drawing/ButtonTest.html" rel = "nofollow noreferrer"> (esempio con Visualizza sorgente)

La sua soluzione prevede un "DynamicIcon" personalizzato classe utilizzata nell'impostazione dell'icona del pulsante e una classe Button personalizzata che aggiunge un metodo alla classe Button per disegnare icone dinamiche.

Il risultato finale è che sei in grado di inviare BitmapData alla classe DynamicIcon, che verrà mostrata nel pulsante. Quindi, incorpora la tua immagine, crea un'istanza della tua classe di asset, ottieni il bitmapasset e modificalo come è necessario e invia bitmapData all'icona.

È un problema interessante e sembra che ci dovrebbe essere una soluzione più semplice, ma funziona senza troppi problemi.

Answer 2

Il modo in cui lo risolverei è implementare una classe skin programmatica che disegna l'icona stessa manualmente. Probabilmente c'è più lavoro che dovrai fare per assicurarti che il pulsante calcoli la dimensione corretta come se avesse un'icona anche se non lo fa. Potrebbe essere necessario scorrere il codice sorgente del pulsante per vedere come viene memorizzato il riferimento all'icona.

Adoro semplicemente creare skin programmatiche che facciano esattamente quello che voglio e quindi utilizzare dichiarazioni CSS interessanti per modificare gli stati, ad esempio:

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

e ovviamente la skin o la classe di pulsanti personalizzati dovrebbero avere:

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

(non sono sicuro di doverlo digitare)

Answer 3

Il grande problema che ho riscontrato con le skin programmatiche è che il pulsante rifiuta di misurare larghezza / altezza. Ho facilmente potuto aggirare il problema sovrascrivendo i metodi get per ciascuno:

ignora la funzione pubblica get width (): Number {return WIDTH; } sovrascrivi funzione pubblica get height (): Number {return HEIGHT; }

Nel mio caso avevo bisogno di modificare i pulsanti in un TabNavigator, quindi non è un modo semplice per sottoclassare il pulsante. Per fortuna, il genitore di ogni skin è il pulsante, quindi utilizzando metodi statici all'interno della skin, è possibile identificare l'istanza del pulsante a cui appartengono le skin dell'icona.

Se stai utilizzando l'icona "tutto-incluso" " stile, verrà creato un nuovo oggetto skin per ogni stato. Quindi dovrai tenerlo presente quando cambi lo stato delle icone.