Playing with Graphics in Flex

Question

Hi All,

I was just going through one code used to draw one chart. This code is written in the updateDisplayList of the itemrenderer of column chart. 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

That code is drawing a rectangle, albeit in a bit of a roundabout way. The drawing api in flash uses a "draw head". I can't see any reason for using g instead of graphics other than to save some typing. g.clear() erases anything that has been drawn before. g.moveTo(rc.left, rc.top) moves that into position, in this case the top left corner of the rectangle (0,0). g.beginFill(fill) starts a fill, nothing surprising there. The g.lineTo(x, y) calls move the draw head around to the the four corners of the rectangle and finally g.endFill() completes the fill.

You can get the same result doing this:

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 2

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.

Answer 3

Degrafa makes this kind of thing much easier.