Search code examples
apache-flexactionscript-3flex3adobe

Playing with Graphics in Flex

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

Solution

  • 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.