flash 绘图API：绘制基础的图形

  flash 的绘图API 函数是很强大的绘图工具，能够创建出很多神奇的效果。最近偶然发现了一些不错的程序，测试了一下感觉很有趣。这部分不算很难，主要懂借用他的命令，加上自己一点创意就能发挥出意想不到的效果。接下来，我们今天探讨绘制的一些基本的图片，先绘制矩形，因为它很简单，仅仅使用一些简单的代码就能够完成。但是你会发现矩形这个数学模型，你会慢慢地喜欢他，不相信，可以亲自动手测试。

 

第一个引出的问题，怎样去绘制一个矩形？ 我们不考虑很全面，尽量使用最简单的办法，那我们先创建一个fla 文件，cs3 或者cs4 都可以。然后我们在帧上写上我们代码，因为这是测试。所以代码尽量简单化。

this.graphics.lineStyle(2); this.graphics.beginFill(0xff0000); this.graphics.drawRect(200,200,100,150); this.graphics.endFill();

 

 

接下来，我们要通过鼠标进行绘制，这一个简单的交互操作。利用鼠标拖动的方式来绘制一个矩形，而接下来进行鼠标监听一个动作。

首先先创建一个Shape 对象，这个对象用于绘制图形的。

var shape:Shape=new Shape();
addChild(shape);

 

然后，进行鼠标的一些监听

stage.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler); stage.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);

 

然后进行处理

function mouseDownHandler(event:MouseEvent):void { } function mouseMoveHandler(event:MouseEvent):void { }

 

 

基本的设置已经弄好，然后我们对其之前绘制矩形进行封装一个函数方便调用

 

//绘制这种样式的矩形 function DrawRect(tx:Number,ty:Number,W:Number,H:Number):void { shape.graphics.clear(); shape.graphics.beginFill(0x00ff00,0.2); shape.graphics.lineStyle(2); shape.graphics.drawRect(tx,ty, W, H); shape.graphics.endFill(); }

 

四个不同参数，分别是坐标x，y，和矩形大小宽度和高度。

 

总的代码：当按下鼠标，鼠标拖动的时候，矩形就绘制成了。这个基本的东西已经完成了，不是什么大程序，但是如果你结合到在线图形编辑器，你一定会喜欢上这个。同样我们换成了圆的画法，仅仅修改一个函数就行drawCircle（x，y，r）；

 

要是椭圆，其实仅仅修改一下就行。

 

var shape:Shape=new Shape(); addChild(shape); var point:Point; var key:Boolean=false; stage.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler); stage.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler); function mouseDownHandler(event:MouseEvent):void { key=true; point=new Point(mouseX,mouseY); stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler); } function mouseMoveHandler(event:MouseEvent):void { if (key) { var Width:Number=mouseX-point.x; var Height:Number=mouseY-point.y; DrawRect(point.x,point.y,Width,Height); } } function mouseUpHandler(event:MouseEvent):void { key=false; } //绘制这种样式的矩形 function DrawRect(tx:Number,ty:Number,W:Number,H:Number):void { shape.graphics.clear(); shape.graphics.beginFill(0x00ff00,0.2); shape.graphics.lineStyle(2); shape.graphics.drawRect(tx,ty, W, H); shape.graphics.endFill(); }

 

这个代码只能够绘制一个矩形。因为使用clear（） 但是对于这种办法，我们依旧可以进行很多扩展。

var shape:Shape; var point:Point; var key:Boolean=false; stage.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler); stage.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler); function mouseDownHandler(event:MouseEvent):void { key=true; shape=new Shape(); addChild(shape); point=new Point(mouseX,mouseY); stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler); } function mouseMoveHandler(event:MouseEvent):void { if (key) { var Width:Number=mouseX-point.x; var Height:Number=mouseY-point.y; DrawRect(point.x,point.y,Width,Height); } } function mouseUpHandler(event:MouseEvent):void { key=false; } //绘制这种样式的矩形 function DrawRect(tx:Number,ty:Number,W:Number,H:Number):void { shape.graphics.clear(); shape.graphics.beginFill(0x00ff00,0.2); shape.graphics.lineStyle(2); shape.graphics.drawRect(tx,ty, W, H); shape.graphics.endFill(); }

 

 

 

我们对其进行扩展，修改成专门绘制矩形的类，修改成专门绘制圆的类。

进行组成一个在线的绘图。这些可能行都会存在的，只要了解这些就能发挥出连自己都想不到的应用。呵呵