Flex的Graphics的画画实例(静态)

<?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"> <fx:Script> ? ?<![CDATA[ ? ? import flash.geom.Matrix; ? ? ? ? ? ? ? ? //画矩形 ? ? private function rect(rectX:Number,rectY:Number,rectWidth:Number,rectHeight:Number):void{ ? ? ?rectBoxID.graphics.clear(); ? ? ?if(radioLineID.selected){ ? ?//线性 ? ? ? rectBoxID.graphics.lineStyle(20,0xFF0000,1.0,false,LineScaleMode.VERTICAL,CapsStyle.NONE,JointStyle.MITER,100); ? ? ?}else if(radioGradientID.selected){ ? ?//渐变 ? ? ? var matr:Matrix = new Matrix(); ? ? ? matr.createGradientBox(20,20,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){ ? ?//填充 ? ? ? rectBoxID.graphics.beginFill(0xFF0000,1.0); ? ? ?} ? ? ?rectBoxID.graphics.drawRect(rectX,rectY,rectWidth,rectHeight); // ? ? ? ? } ? ? ? ? //画圆角矩形 ? ? private function circleRect(cRectX:Number,cRectY:Number,cRectWidth:Number,cRectHeight:Number,cRectDU:Number):void{ ? ? ?cRectBoxID.graphics.clear(); ? ? ?if(radioLineID.selected){ ? ?//线性 ? ? ? cRectBoxID.graphics.lineStyle(20,100); ? ? ?}else if(radioGradientID.selected){ ? ?//渐变 ? ? ? //the last parameter can selete three type: SpreadMethod.PAD or SpreadMethod.REFLECT or SpreadMethod.REPEAT. ? ? ? cRectBoxID.graphics.beginGradientFill(GradientType.LINEAR,0x0000FF],0.1],[0,255],new Matrix(),SpreadMethod.PAD); ? ? ? rectBoxID.graphics.endFill(); ? ? ?}else if(radioFullID.selected){ ? ?//填充 ? ? ? cRectBoxID.graphics.beginFill(0xFF0000,1.0); ? ? ?} ? ? ?cRectBoxID.graphics.drawRoundRect(cRectX,cRectY,cRectWidth,cRectHeight,cRectDU); ? ? } ? ? ? ? //画直线 ? ? private function line(lineX:Number,lineY:Number):void{ ? ?//两个参数都表示从起始的位置坐标x、y相加这两个参数后值就是结束的x、y值 ? ? ?lineBoxID.graphics.clear(); ? ? ?if(radioLineID.selected){ ? ?//线性 ? ? ? lineBoxID.graphics.lineStyle(20,100); ? ? ?}else if(radioGradientID.selected){ ? ?//渐变 ? ? ? lineBoxID.graphics.lineStyle(20,100); ? ? ? lineBoxID.graphics.lineGradientStyle(GradientType.LINEAR,0.5],SpreadMethod.PAD); ? ? ?}else if(radioFullID.selected){ ? ?//（填充）直线不存在填充的，呵呵 ? ? ? lineBoxID.graphics.lineStyle(20,100); ? ? ?} ? ? ?lineBoxID.graphics.lineTo(lineX,lineY); ? ? } ? ? ? ? //画曲线 ? ? private function cLine(endX:Number,endY:Number):void{ ? ? ?cLineBoxID.graphics.clear(); ? ? ?if(radioLineID.selected){ ? ?//线性 ? ? ? cLineBoxID.graphics.lineStyle(20,0); ? ? ? cLineBoxID.graphics.beginGradientFill(GradientType.LINEAR,0x00FF00,0xFF0000],[0.2,1,128,SpreadMethod.REFLECT); ? ? ?}else if(radioFullID.selected){ ? ?//填充 ? ? ? cLineBoxID.graphics.beginFill(0xFF0000); ? ? ?} ? ? ?cLineBoxID.graphics.curveTo(100,80,endX,endY); ? ?//前两个参数表示弧度的偏移量，后两个参数表示结束点的x、y坐标 ? ? } ? ? ? ? //画圆 ? ? private function circle(oX:Number,oY:Number,radius:Number):void{ ? ? ?circleBoxID.graphics.clear(); ? ? ?if(radioLineID.selected){ ? ?//线性 ? ? ? circleBoxID.graphics.lineStyle(20,0); ? ? ? circleBoxID.graphics.beginGradientFill(GradientType.LINEAR,SpreadMethod.REFLECT,? "rgb",0.7); ? ? ?}else if(radioFullID.selected){ ? ?//填充 ? ? ? circleBoxID.graphics.beginFill(0xFF0000); ? ? ?} ? ? ?circleBoxID.graphics.drawCircle(oX,oY,radius); ? ? } ? ? ? ? //画椭圆 ? ? private function tCircle(x:Number,y:Number,tWidth:Number,tHeight:Number):void{ ? ? ?tCircleBoxID.graphics.clear(); ? ? ?if(radioLineID.selected){ ? ?//线性 ? ? ? tCircleBoxID.graphics.lineStyle(20,0); ? ? ? //the last parameter can selete three type: SpreadMethod.PAD or SpreadMethod.REFLECT or SpreadMethod.REPEAT. ? ? ? tCircleBoxID.graphics.beginGradientFill(GradientType.LINEAR,[1.0,1.0],SpreadMethod.REPEAT); ? ? ?}else if(radioFullID.selected){ ? ?//填充 ? ? ? tCircleBoxID.graphics.beginFill(0xFF0000); ? ? ?} ? ? ?tCircleBoxID.graphics.drawEllipse(x,y,tWidth,tHeight); ? ? } ? ? ? ?]]> </fx:Script> <!--画矩形--> <mx:Button id="rectButID" x="500" y="50" label="画矩形" click="rect(100,250,50);"/> <mx:Box id="rectBoxID"/> <!--画圆角矩形--> <mx:Button id="cRectButID" x="500" y="120" label="画圆角矩形" click="circleRect(100,100,300,50);"/> <mx:Box id="cRectBoxID"/> <!--画直线--> <mx:Button id="lineButID" x="500" y="250" label="画直线" click="line(350,0);"/> <mx:Box id="lineBoxID" x="50" y="250"/> <!--画曲线--> <mx:Button id="cLineButID" x="500" y="350" label="画曲线" click="cLine(300,0);"/> <mx:Box id="cLineBoxID" x="100" y="300"/> <!--画圆--> <mx:Button id="circleButID" x="500" y="450" label="画圆" click="circle(250,450,50);"/> <mx:Box id="circleBoxID"/> <!--画椭圆--> <mx:Button id="tCircleButID" x="500" y="550" label="画椭圆" click="tCircle(120,520,150,50);"/> <mx:Box id="tCircleBoxID"/> <mx:RadioButton id="radioLineID" x="600" y="50" label="线性"/> <mx:RadioButton id="radioGradientID" x="750" y="50" label="渐变" selected="true"/> <mx:RadioButton id="radioFullID" x="900" y="50" label="填充"/> </s:Application>