Jouer avec des graphiques dans Flex

Question

Je passais juste par un code utilisé pour dessiner un graphique. Ce code est écrit dans la fonction updateDisplayList du ItemRenderer de ColumnChart. Je ne suis pas bon dans la partie graphique de Flex. Quelqu'un peut-il m'expliquer ce que fait ce code? Je peux voir la sortie finale, mais je ne suis pas sûr de savoir comment cela est réalisé.

var rc:Rectangle = new Rectangle(0, 0, width , height); 
var g:Graphics = graphics; 

g.clear();   
g.moveTo(rc.left,rc.top); 
g.beginFill(fill); 
g.lineTo(rc.right,rc.top); 
g.lineTo(rc.right,rc.bottom); 
g.lineTo(rc.left,rc.bottom); 
g.lineTo(rc.left,rc.top); 
g.endFill(); 

Cordialement, PK

Answer 1

Il tire essentiellement un rectangle.

//clear any existing drawings 
g.clear(); 

Régler la position actuelle du dessin vers le coin supérieur gauche du rectangle, qui est égal à 0, 0

g.moveTo(rc.left,rc.top); 

//start filling with the color specified by `fill` 
g.beginFill(fill); 

Tracer une ligne vers le haut à droite coin du rectangle de l'emplacement actuel (qui est le coin supérieur gauche). La méthode lineTo met à jour l'emplacement actuel afin que les dessins suivants commencent à partir du nouveau point.

g.lineTo(rc.right,rc.top); 

Dessiner les autres côtés du rectangle:

g.lineTo(rc.right,rc.bottom); 
g.lineTo(rc.left,rc.bottom); 
g.lineTo(rc.left,rc.top); 

//end the fill. 
g.endFill(); 

Vérifiez la livedocs page for Graphics class pour plus d'informations.

---

Tous les composants visuels dans Flex directement hériteront/indirectement de la classe UIComponent. La méthode updateDisplayList de UIComponent dessine l'objet et/ou les tailles et positions de ses enfants. Il s'agit d'une méthode avancée que vous pouvez remplacer lors de la création d'une sous-classe UIComponent. Lorsque vous le remplacez dans votre classe enfant, vous devez appeler super.updateDisplayList avec les paramètres corrects pour vous assurer que les composants de la classe de base sont correctement mis à jour.

Answer 2

Ce code est en dessinant un rectangle, mais un peu d'une manière détournée. Le dessin api en flash utilise une "tête de tirage". Je ne vois aucune raison d'utiliser g au lieu de graphics autre que pour économiser de la frappe. g.clear() efface tout ce qui a été dessiné auparavant. g.moveTo(rc.left, rc.top) déplace cette position, en l'occurrence le coin supérieur gauche du rectangle (0,0). g.beginFill(fill) commence un remplissage, rien de surprenant là-bas. Les appels g.lineTo(x, y) déplacent la tête de dessin autour des quatre coins du rectangle et, enfin, g.endFill() termine le remplissage.

Vous pouvez obtenir le même résultat faire:

graphics.clear(); 
graphics.beginFill(fill); 
graphics.drawRect(0, 0, width , height); 
// this last call is only needed if you're going to draw even more, 
// if not you can omit that too 
graphics.endFill(); 

Answer 3

Degrafa rend ce genre de chose beaucoup plus facile.