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" xmlns:mx1="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ import flash.geom.Matrix; /* 画图形之前必要调用的函数（其中之一即可）： linestyle()、beginFill()、lineGradientStyle()、beginGradientFill()、beginBitmapFill()方法来设置线条样式和/或填充。 */ //画矩形 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> <!--画矩形--> <mx1:Button id="rectButID" x="500" y="50" label="画矩形" click="rect(100,250,50);"/> <mx1:Box id="rectBoxID"/> <!--画圆角矩形--> <mx1:Button id="cRectButID" x="500" y="120" label="画圆角矩形" click="circleRect(100,100,300,50);"/> <mx1:Box id="cRectBoxID"/> <!--画直线--> <mx1:Button id="lineButID" x="500" y="250" label="画直线" click="line(350,0);"/> <mx1:Box id="lineBoxID" x="50" y="250"/> <!--画曲线--> <mx1:Button id="cLineButID" x="500" y="350" label="画曲线" click="cLine(300,0);"/> <mx1:Box id="cLineBoxID" x="100" y="300"/> <!--画圆--> <mx1:Button id="circleButID" x="500" y="450" label="画圆" click="circle(250,450,50);"/> <mx1:Box id="circleBoxID"/> <!--画椭圆--> <mx1:Button id="tCircleButID" x="500" y="550" label="画椭圆" click="tCircle(120,520,150,50);"/> <mx1:Box id="tCircleBoxID"/> <mx1:RadioButton id="radioLineID" x="600" y="50" label="线性"/> <mx1:RadioButton id="radioGradientID" x="750" y="50" label="渐变" selected="true"/> <mx1:RadioButton id="radioFullID" x="900" y="50" label="填充"/> </s:Application>