Flex graphics example

<? XML version = "1.0" encoding = "UTF-8"?>
<S: Application xmlns: FX = "http://ns.adobe.com/mxml/2009"
Xmlns: S = "Library: // ns.adobe.com/flex/spark"
Xmlns: MX = "Library: // ns.adobe.com/flex/halo"
Minwidth = "1024" minheight = "768" xmlns: mx1 = "Library: // ns.adobe.com/flex/mx">
 
<FX: SCRIPT>
<! [CDATA [
Import flash. Geom. matrix;

/*
Functions that need to be called before drawing a graph (one of them ):
Linestyle (), beginfill (), linegradientstyle (), begingradientfill (), beginbitmapfill () to set the line style and/or fill.
*/

// Draw a rectangle
Private function rect (rectx: Number, recty: Number, rectwidth: Number, rectheight: Number): void {
Rectboxid. Graphics. Clear ();
If (radiolineid. Selected) {// linear
Rectboxid. Graphics. linestyle (20, 0xff0000, 1.0, false, linescalemode. Vertical, capsstyle. None, jointstyle. Miter, 100 );
} Else if (radiogradientid. Selected) {// gradient
VaR matr: matrix = new matrix ();
Matr. creategradientbox (20, 20, 0, 0 );
// The last parameter can selete three type: spreadmethod. pad or spreadmethod. reflect or spreadmethod. Repeat.
Rectboxid. Graphics. begingradientfill (gradienttype. Linear, [0xff0000, 0x00ff00], [1, 1], [0x00, 0xff], matr, spreadmethod. Repeat );
} Else if (radiofullid. Selected) {// fill
Rectboxid. Graphics. beginfill (0xff0000, 1.0 );
}
Rectboxid. Graphics. drawrect (rectx, recty, rectwidth, rectheight );
//
}

// Draw a rounded rectangle
Private function circlerect (crectx: Number, crecty: Number, crectwidth: Number, crectheight: Number, crectdu: Number): void {
Crectboxid. Graphics. Clear ();
If (radiolineid. Selected) {// linear
Crectboxid. Graphics. linestyle (20, 0xff0000, 1.0, false, linescalemode. Vertical, capsstyle. None, jointstyle. Miter, 100 );
} Else if (radiogradientid. Selected) {// gradient
// The last parameter can selete three type: spreadmethod. pad or spreadmethod. reflect or spreadmethod. Repeat.
Crectboxid. Graphics. begingradientfill (gradienttype. Linear, [0xff0000, 0x0000ff], [1, 0.1], [0,255], new matrix (), spreadmethod. Pad );
Rectboxid. Graphics. endfill ();
} Else if (radiofullid. Selected) {// fill
Crectboxid. Graphics. beginfill (0xff0000, 1.0 );
}
Crectboxid. Graphics. drawroundrect (crectx, crecty, crectwidth, crectheight, crectdu );
}

// Draw a straight line
Private function line (LinEx: Number, Liney: number ): void {// both parameters indicate the ending x and y values after adding the coordinates x and y at the starting position.
Lineboxid. Graphics. Clear ();
If (radiolineid. Selected) {// linear
Lineboxid. Graphics. linestyle (20, 0xff0000, 1.0, false, linescalemode. Vertical, capsstyle. None, jointstyle. Miter, 100 );
} Else if (radiogradientid. Selected) {// gradient
Lineboxid. Graphics. linestyle (20, 0xff0000, 1.0, false, linescalemode. Vertical, capsstyle. None, jointstyle. Miter, 100 );
Lineboxid. Graphics. linegradientstyle (gradienttype. Linear, [0xff0000, 0x0000ff], [1, 0.5], [0,255], new matrix (), spreadmethod. Pad );
} Else if (radiofullid. Selected) {// (fill) The line does not exist.
Lineboxid. Graphics. linestyle (20, 0xff0000, 1.0, false, linescalemode. Vertical, capsstyle. None, jointstyle. Miter, 100 );
}
Lineboxid. Graphics. lineto (LinEx, Liney );
}

// Draw a curve
Private function Cline (endx: Number, Endy: Number): void {
Clineboxid. Graphics. Clear ();
If (radiolineid. Selected) {// linear
Clineboxid. Graphics. linestyle (20, 0xff0000, 1.0, false, linescalemode. Vertical, capsstyle. None, jointstyle. Miter, 100 );
} Else if (radiogradientid. Selected) {// gradient
VaR matr: matrix = new matrix ();
Matr. creategradientbox (20, 20, 0, 0 );
Clineboxid. Graphics. begingradientfill (gradienttype. Linear, [0xff0000, 0x00ff00, 0xff0000], [0.2, 1, 1], [0,128,255], matr, spreadmethod. Reflect );
} Else if (radiofullid. Selected) {// fill
Clineboxid. Graphics. beginfill (0xff0000 );
}
Clineboxid. Graphics. curveto (100, 80, endx, Endy); // The first two parameters represent the radians offset, and the last two parameters represent the X and Y coordinates of the end point
}

// Circle
Private function circle (OX: Number, oy: Number, radius: Number): void {
Circleboxid. Graphics. Clear ();
If (radiolineid. Selected) {// linear
Circleboxid. Graphics. linestyle (20, 0xff0000, 1.0, false, linescalemode. Vertical, capsstyle. None, jointstyle. Miter, 100 );
} Else if (radiogradientid. Selected) {// gradient
VaR matr: matrix = new matrix ();
Matr. creategradientbox (20, 20, 0, 0 );
Circleboxid. graphics. begingradientfill (gradienttype. linear, [0xff0000, 0x00ff00, 0xff0000], [0.2, 1, 1], [0,128,255], matr, spreadmethod. reflect, "RGB", 0.7 );
} Else if (radiofullid. Selected) {// fill
Circleboxid. Graphics. beginfill (0xff0000 );
}
Circleboxid. Graphics. drawcircle (OX, oy, radius );
}

// Draw an ellipse
Private function tcircle (X: Number, Y: Number, twidth: Number, theight: Number): void {
Tcircleboxid. Graphics. Clear ();
If (radiolineid. Selected) {// linear
Tcircleboxid. Graphics. linestyle (20, 0xff0000, 1.0, false, linescalemode. Vertical, capsstyle. None, jointstyle. Miter, 100 );
} Else if (radiogradientid. Selected) {// gradient
VaR matr: matrix = new matrix ();
Matr. creategradientbox (20, 20, 0, 0 );
// The last parameter can selete three type: spreadmethod. pad or spreadmethod. reflect or spreadmethod. Repeat.
Tcircleboxid. Graphics. begingradientfill (gradienttype. Linear, [0xff0000, 0x00ff00], [1.0, 1.0], [0x00, 0xff], matr, spreadmethod. Repeat );
} Else if (radiofullid. Selected) {// fill
Tcircleboxid. Graphics. beginfill (0xff0000 );
}
Tcircleboxid. Graphics. drawellipse (X, Y, twidth, theight );
}

]>
</FX: SCRIPT>
 
<! -- Draw a rectangle -->
<Mx1: button id = "rectbutid" x = "500" Y = "50" label = "draw a rectangle" Click = "rect (100, 20,250, 50);"/>
<Mx1: Box id = "rectboxid"/>
 
<! -- Draw a rounded rectangle -->
<Mx1: button id = "crectbutid" x = "500" Y = "120" label = "Draw rounded rectangle" Click = "circlerect (100,100,300, 80, 50 ); "/>
<Mx1: Box id = "crectboxid"/>
 
<! -- Draw a straight line -->
<Mx1: button id = "linebutid" x = "500" Y = "250" label = "draw a straight line" Click = "line (350, 0);"/>
<Mx1: Box id = "lineboxid" x = "50" Y = "250"/>
 
<! -- Draw a curve -->
<Mx1: button id = "clinebutid" x = "500" Y = "350" label = "Draw curve" Click = "Cline (300, 0);"/>
<Mx1: Box id = "clineboxid" x = "100" Y = "300"/>
 
<! -- Circle -->
<Mx1: button id = "circlebutid" x = "500" Y = "450" label = "circle" Click = "Circle (250,450, 50);"/>
<Mx1: Box id = "circleboxid"/>
 
<! -- Draw an ellipse -->
<Mx1: button id = "tcirclebutid" x = "500" Y = "550" label = "draw an ellipse" Click = "tcircle (120,520,150, 50);"/>
<Mx1: Box id = "tcircleboxid"/>
 
<Mx1: radiobutton id = "radiolineid" x = "600" Y = "50" label = "linear"/>
<Mx1: radiobutton id = "radiogradientid" x = "750" Y = "50" label = "gradient" selected = "true"/>
<Mx1: radiobutton id = "radiofullid" x = "900" Y = "50" label = "fill"/>
 
</S: Application>