Question

I was just going through one code used to draw one chart. This code is written in the updateDisplayList function of the ItemRenderer of ColumnChart. I am not good at the graphics part of Flex. Can anybody please explain me what this code is doing? I can see the final output, but am not sure how is this achieved.

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();

Regards, PK

Answer 1

It basically draws a rectangle.

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

Set the current drawing position to the top-left corner of the rectangle, which is 0, 0

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

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

Draw a line to top-right corner of the rectangle from the current location (which is top-left corner). The lineTo method updates the current location so that subsequent drawings start from the new point.

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

Draw the remaining sides of the rectangle:

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

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

Check out the livedocs page for Graphics class for more info.

---

All the visual components in Flex inherit directly/indirectly from the UIComponent class. The updateDisplayList method of UIComponent draws the object and/or sizes and positions its children. This is an advanced method that you might override when creating a subclass of UIComponent. When you override it in your child class, you should call super.updateDisplayList with the correct parameters to make sure that the base class components are properly updated.