使用flash as3代码来画图

1、使用flash as3代码来画图使用代码来画图 但是我们不推荐这样做 太累了 演示使用 flash actionscript 3.0 画一些基本的图形，以及对绘制的图形或其他可视对象做一些基本的转换 画图 - 通过 shape 对象的 graphics 属性来执行矢量绘图命令 o 1、使用 linestyle() 定义画图的线条样式 o 2、moveto() - 设置当前绘画点；lineto() - 以当前绘画点为起点，用当前定义的线条样式，画一条直线到目标点；curveto() - 指定二次贝塞尔曲线的控制点和终点，从而完成曲线的绘制；drawrect() - 绘制矩形；drawcircle

2、() - 绘制圆形；drawellipse() - 绘制椭圆； o 3、beginfill() 和 endfill() 用于填充他们之间所绘制的图形。如果是渐变填充则对应的方法是 begingradientfill 和 endfill() 转换 - 通过设置对象的 transform.matrix 属性，对其做相应的转换 o matrix.rotate() - 旋转的角度 o matrix.translate() - 平移的距离 o matrix.scale() - 缩放的比例 o matrix.b - 将矩阵垂直倾斜 o matrix.c - 将矩阵水平倾斜 1、画图在 ui 上放置 8 个

3、 button名称分别为：btnline, btncurve, btnrectangle, btncircle, btnellipse, btnliner, btnradial, btnclea分别用于演示：画直线，画曲线，画矩形，画圆形，画椭圆，线性渐变填充，放射性渐变填充，清除图形main.aspackageimportflash.display.movieclip;importfl.events.componentevent;importfl.events.sliderevent;importflash.display.shape;importflash.geom.matrix;impo

4、rtflash.display.gradienttype;importflash.display.spreadmethod;publicclassmainextendsmovieclipvaroriginalmatrix:matrix;publicfunctionmain():voidbtnline.addeventlistener(componentevent.button_down,drawline);btncurve.addeventlistener(componentevent.button_down,drawcurve);btnrectangle.addeventlistener(c

5、omponentevent.button_down,drawrectangle);btncircle.addeventlistener(componentevent.button_down,drawcircle);btnellipse.addeventlistener(componentevent.button_down,drawellipse);btnliner.addeventlistener(componentevent.button_down,drawlinergradient);btnradial.addeventlistener(componentevent.button_down

6、,drawradialgradient);btnclear.addeventlistener(componentevent.button_down,cleargraphics);/画直线functiondrawline(e:componentevent):void/linestyle()-定义画图的线条样式/第一个参数：线条粗细，整数（0-255）/第二个参数：线条的颜色值（16进制）/第三个参数：不透明度（0-1）canvas.graphics.linestyle(12,0x000000);/moveto()-设置当前绘画点。在本例中就是直线的起点canvas.graphics.moveto

7、(0,0);/lineto()-以当前绘画点为起点，用当前定义的线条样式，画一条直线到目标点canvas.graphics.lineto(100,100);/画曲线（二次贝塞尔曲线）functiondrawcurve(e:componentevent):voidcanvas.graphics.linestyle(1,0x000000);canvas.graphics.moveto(100,0);/curveto()-指定二次贝塞尔曲线的控制点和终点，从而完成曲线的绘制/前两个参数为控制点，后两个参数为终点，当前绘画点为起点canvas.graphics.curveto(100,100,200,

8、200);/画矩形functiondrawrectangle(e:componentevent):voidcanvas.graphics.linestyle(5,0xff0000);/drawrect()-绘制矩形/第一个参数：矩形左上角的x坐标/第二个参数：矩形左上角的y坐标/第三个参数：矩形的宽/第四个参数：矩形的高canvas.graphics.drawrect(200,0,100,50);/画圆functiondrawcircle(e:componentevent):voidcanvas.graphics.linestyle(1,0x000000);/beginfill()-单色填充这

9、之后所绘制的图形，直到调用endfill()为止/两个参数分别为填充的颜色值和不透明度canvas.graphics.beginfill(0xff0000,0.5);/drawcircle()-绘制圆形/三个参数分别为圆心的x坐标，圆心的y坐标，圆形的半径canvas.graphics.drawcircle(300,0,30);/endfill()-呈现beginfill()与endfill()之间所绘制的图形的填充效果canvas.graphics.endfill();/画椭圆functiondrawellipse(e:componentevent):voidcanvas.graphics.

10、linestyle(1,0x000000);canvas.graphics.beginfill(0xff0000);/drawellipse()-绘制椭圆/前两个参数：椭圆左侧顶点的x坐标和y坐标/后两个参数：椭圆的宽和高canvas.graphics.drawellipse(0,200,100,50);canvas.graphics.endfill();/线性渐变填充functiondrawlinergradient(e:componentevent):voidcanvas.graphics.linestyle(1,0x000000);/声明一个仿射矩阵matrixvargradientbo

11、xmatrix:matrix=newmatrix();/creategradientbox()-matrix的一个专门为渐变填充提供的方法/三个参数分别为渐变框的宽，渐变框的高，渐变框的旋转弧度gradientboxmatrix.creategradientbox(50,20,0);/begingradientfill()-做渐变填充/第一个参数：渐变模式。gradienttype.linear为线性渐变；gradienttype.radial为放射性渐变/第二个参数：渐变色的颜色值数组/第三个参数：渐变色的不透明度数组/第四个参数：渐变色的分布比例数组（0-255）。0为渐变框的最左侧，25

12、5为渐变框的最右侧/第五个参数：用matrix.creategradientbox()生成的渐变框/第六个参数：伸展方式/spreadmethod.pad-用线性渐变线末端的颜色值填充剩余空间/spreadmethod.reflect-相邻填充区域，以相反方向重复渐变，直至填充满整个剩余空间/spreadmethod.repeat-相邻填充区域，以相同方向重复渐变，直至填充满整个剩余空间canvas.graphics.begingradientfill(gradienttype.linear,0xff0000,0x0000ff,1,1,0,255,gradientboxmatrix,sprea

13、dmethod.repeat);canvas.graphics.drawrect(100,200,100,20);canvas.graphics.endfill();/放射性渐变填充functiondrawradialgradient(e:componentevent):voidcanvas.graphics.linestyle(1,0x000000);vargradientboxmatrix:matrix=newmatrix();gradientboxmatrix.creategradientbox(50,20,0);/gradienttype.radial-放射性渐变canvas.grap

14、hics.begingradientfill(gradienttype.radial,0xff0000,0x0000ff,1,1,0,255,gradientboxmatrix,spreadmethod.reflect);canvas.graphics.drawcircle(200,200,30);canvas.graphics.endfill();/清除图形functioncleargraphics(e:componentevent):void/clear()-清除graphics上的图形，并重置线条样式和填充等设置canvas.graphics.clear();2、转换在 ui 上放置 3

15、 个 silder分别名为：sliderscalex, sliderscaley, sliderrotate分别用于演示 x 轴方向上的缩放，y 轴方向上的缩放，旋转再放置 2 个 button分别名为：btnmatrix, btnclearmatrix分别用于演示仿射矩阵在图形转换上的应用，还原为对象的初始仿射矩阵转换main.aspackageimportflash.display.movieclip;importfl.events.componentevent;importfl.events.sliderevent;importflash.display.shape;importflas

16、h.geom.matrix;importflash.display.gradienttype;importflash.display.spreadmethod;publicclassmainextendsmovieclipvaroriginalmatrix:matrix;publicfunctionmain():voidsliderscalex.addeventlistener(sliderevent.thumb_drag,scalexhandler);sliderscaley.addeventlistener(sliderevent.thumb_drag,scaleyhandler);sli

17、derrotate.addeventlistener(sliderevent.thumb_drag,rotatehandler);btnmatrix.addeventlistener(componentevent.button_down,matrixhandler);btnclearmatrix.addeventlistener(componentevent.button_down,clearmatrixhandler);/保存canvas的初始仿射矩阵转换originalmatrix=canvas.transform.matrix;/在x轴方向上做缩放functionscalexhandle

18、r(e:sliderevent):void/scalex-x轴方向上的缩放比例canvas.scalex=e.value;/在y轴方向上做缩放functionscaleyhandler(e:sliderevent):void/scaley-y轴方向上的缩放比例canvas.scaley=e.value;/旋转functionrotatehandler(e:sliderevent):void/rotation-旋转的度数canvas.rotation=e.value;/仿射矩阵在图形转换上的应用functionmatrixhandler(e:componentevent):voidvarmatrix:matrix=newmatrix();/rotate()-旋转的角度matrix.rotate(10);/translate()-平移的距离matrix.translate(200,200);/scale()-缩放的比例matrix.scale(1.2,1.2);varskewma