Flex绘图测试程序

最近几天一直在研究Flex和ActionScript，没什么时间做Swing了，虽然现在对Flex还有点晕，但我发现我已经慢慢开始喜欢他了 刚刚完成了一个基于ActionScript的Flex绘图程序，和用Swing的Graphics2D比较了一下，其中也走了不少弯路，下面和大家分享一下：

MXXML：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="drawPanel()" width="600" height="400">
<mx:Script>
<![CDATA[
import draw.DrawPanel;
import mx.core.UIComponent;
public function drawPanel():void{
var component:UIComponent=new UIComponent();
var panel:DrawPanel=new DrawPanel();
myCanvas.addChild(component);
component.addChild(panel);
}
]]>
</mx:Script>
<mx:Canvas x="0" y="0" width="100%" height="100%" id="myCanvas">
</mx:Canvas>
</mx:Application>

---------------------------------------------------------------------------------------------------------------------------------

DrawPanel.as：

package draw
{
//Sprite里面没有任何内容的容器
//还可以在影片剪辑上绘制
import flash.display.*;
import flash.events.*;
import flash.geom.Point;
import flash.utils.*;
public class DrawPanel extends Sprite
{
private var circle:Shape;

private var first:Point=new Point();
private var second:Point=new Point();

public function DrawPanel()
{
super();
this.graphics.beginFill(0xffff11);
this.graphics.drawRect(0, 0, 600, 400);
this.graphics.endFill( );
this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}

private function onMouseDown(event:MouseEvent):void {
circle=new Shape();
circle.graphics.lineStyle(2, 0, 1,false,LineScaleMode.NORMAL,CapsStyle.ROUND,JointStyle.BEVEL,3);
this.addChild(circle);

first.x=mouseX;
first.y=mouseY;
second.x=mouseX;
second.y=mouseY;
// this.graphics.moveTo(mouseX, mouseY);//定位当前鼠标坐标
this.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
private function onMouseUp(event:MouseEvent):void {
this.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
circle.graphics.clear();//清除掉了
circle.graphics.lineStyle(2, 0, 1,false,LineScaleMode.NORMAL,CapsStyle.ROUND,JointStyle.BEVEL,3);
second.x =mouseX;
second.y = mouseY;

var preX:Number = Math.min(first.x, second.x);
var preY:Number = Math.min(first.y, second.y);
var cWidth:Number = Math.abs(first.x - second.x);
var cHeight:Number = Math.abs(first.y - second.y);

circle.graphics.drawEllipse(preX,preY,cWidth,cHeight);

}

private function onMouseMove(event:MouseEvent):void {
circle.graphics.clear();
circle.graphics.lineStyle(2, 0, 1,false,LineScaleMode.NORMAL,CapsStyle.ROUND,JointStyle.BEVEL,3);
second.x =mouseX;
second.y = mouseY;
var preX:Number = Math.min(first.x, second.x);
var preY:Number = Math.min(first.y, second.y);
var cWidth:Number = Math.abs(first.x - second.x);
var cHeight:Number = Math.abs(first.y - second.y);
circle.graphics.drawEllipse(preX,preY,cWidth,cHeight);

}
}
}

效果图：



几个需要注意的地方：
1.ActionScript里面没有Graphics2D中XOR模式，必须调用当前graphics.clear()方法，并且重新设置lineStyle();再进行绘制

2.Sprite如果里面没有内容，他是不会显示在组件上面的，所有我们必须在其parent组件大小确定的情况下，在Sprite初始化时绘制一个与其外层组件大小一致矩形，把Sprite支撑开。我们才能够在里面绘制其他图形。

3.因为Sprite不能直接嵌入Flex,所以我们必须把它用UIComponent封装一下，在把UIComponent放在一个Flex容器中。

如果还有其他问题，可以留言咱们来讨论。