Flex4.0画板

<?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/mx" minWidth="955" minHeight="600"
creationComplete="init()"
>
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.controls.Alert;

import org.osmf.traits.IDownloadable;

import spark.primitives.Graphic;
//线条大小
[Bindable]
public var xiantiao_size:Number=4;
//线条颜色
[Bindable]
public var Color_xiantiao:uint=0xff0000;
//透明度
[Bindable]
public var toumingdu_size:Number=3;
//填充颜色
[Bindable]
public var Color_tianchongse:uint=0xFFFFFFFF;
//字体颜色
[Bindable]
private var Colo_zhitise:uint=0xff0000;
private var mX:Number;
private var mY:Number;
private var isDown:Boolean=false;
private var Startpoint:Point;
private var rtmpURL:String="rtmp://localhost/showal";
private var conn:NetConnection;
public var so:SharedObject;

//页面加载时执行
public function init():void{
//conn=new NetConnection();
//conn.addEventListener(NetStatusEvent.NET_STATUS,netStat);
// conn.connect(rtmpURL);
this.changeDraw(0);
BindingUtils.bindProperty(this,"Color_xiantiao",Color_pick,"selectedColor");
BindingUtils.bindProperty(this,"xiantiao_size",xiantiao_H,"value");
BindingUtils.bindProperty(this,"Color_tianchongse",Color_Tianchong,"selectedColor");
//画笔
}
/* public function netStat(event:NetStatusEvent):void{
if(event.info.code=="NetConnection.Connect.Success"){
Alert.show("连接成功！");
}
so=SharedObject.getRemote("point",conn.uri,true);
so.connect(conn);
so.addEventListener(SyncEvent.SYNC,sysncAl);

}
public function sysncAl(event:SyncEvent):void{
this.myPanel.mouseX=so.data.x;
this.myPanel.mouseY=so.data.y;
}
*/
private function MouseDown0(event:MouseEvent):void{
//Alert.show("0");
mX=myPanel.mouseX;
mY=myPanel.mouseY;
isDown=true;
}
private function MouseMove0(event:MouseEvent):void{
if(isDown){
var x:Number=myPanel.mouseX;
var y:Number=myPanel.mouseY;
myPanel.contentGroup.graphics.lineStyle(xiantiao_size,Color_xiantiao,1);
myPanel.contentGroup.graphics.moveTo(mX,mY);
myPanel.contentGroup.graphics.lineTo(x,y);
mX=x;
mY=y;

}
}
private function MouseUp0(event:MouseEvent):void{
isDown=false;
}
//绘画矩形
private function MouseDown1(event:MouseEvent):void{
mX=myPanel.mouseX;
mY=myPanel.mouseY;
isDown=true;
}
private function MouseMove1(event:MouseEvent):void{
if(isDown){
//var Endpoint:Point=new Point(this.mouseX,this.mouseY);
//var Mygrap:Graphic=new Graphic();
var x:Number=myPanel.x;
var y:Number=myPanel.y;
var r:Number=Math.abs(x - mX);
if(mX+r>myPanel.width){
return;
}

if(mY+r>myPanel.height){
return;
}
var y1:Number=Math.abs(y-mY);
myPanel.contentGroup.graphics.lineStyle(xiantiao_size,Color_xiantiao,1);
myPanel.contentGroup.graphics.beginFill(Color_tianchongse);
myPanel.contentGroup.graphics.drawRect(r,y1,r,y1);
}
}
private function MouseUp1(event:MouseEvent):void{
isDown=false;
}
//画圆
private function MouseDown2(event:MouseEvent):void{
mX=myPanel.mouseX;
mY=myPanel.mouseY;
isDown=true;
}
private function MouseMove2(event:MouseEvent):void{

if(isDown){
var x:Number=myPanel.x;
var y:Number=myPanel.y;
//半径的平方
var r2:Number=Math.abs((y-mY)*(y-mY)+(x-mX)*(x-mX));
var r1:Number=Math.sqrt(r2);
var r:Number=r1/10;

if(mX+r>myPanel.width){
return;
}

if(mY+r>myPanel.height){
return;
}
myPanel.contentGroup.graphics.beginFill(Color_tianchongse);
myPanel.contentGroup.graphics.lineStyle(xiantiao_size,Color_xiantiao,1);
myPanel.contentGroup.graphics.drawCircle(mX,mY,r);
}

}
private function MouseUp2(even:MouseEvent):void{
isDown=false;
}
//椭圆
private function MousMove3(even:MouseEvent):void{
if(isDown){
var x:Number=myPanel.x;
var y:Number=myPanel.y;
if(mX+w>myPanel.width){
return;
}

if(mY+h>myPanel.height){
return;
}
var w:Number=Math.abs(x-mX)/5;
var h:Number=Math.abs(y-mY)/5;
myPanel.contentGroup.graphics.beginFill(Color_tianchongse);
myPanel.contentGroup.graphics.drawEllipse(mX,mY,w,h);
myPanel.contentGroup.graphics.lineStyle(xiantiao_size,Color_xiantiao,1);
mX=x;
mY=y;
}
}
private function MouseMove4(event:MouseEvent):void{

if(isDown){
var x:Number=myPanel.mouseX;
var y:Number=myPanel.mouseY;
var clo:uint=0xFFFFFFFF;
myPanel.contentGroup.graphics.lineStyle(30,clo,1);
myPanel.contentGroup.graphics.moveTo(mX,mY);
myPanel.contentGroup.graphics.lineTo(x,y);
mX=x;
mY=y;
}
}

//改变绘图方式
private function changeDraw(n:Number):void{
switch(n){
case 0:{
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove4);
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MousMove3);
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove2);
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove1);
myPanel.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown0);
myPanel.addEventListener(MouseEvent.MOUSE_MOVE,MouseMove0);
myPanel.addEventListener(MouseEvent.MOUSE_UP,MouseUp0);


break;}
case 1:{
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove4);
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MousMove3);
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove0);
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove2);
myPanel.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown1);
myPanel.addEventListener(MouseEvent.MOUSE_MOVE,MouseMove1);
myPanel.addEventListener(MouseEvent.MOUSE_UP,MouseUp1);

break;}
case 2:{
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove4);
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MousMove3);
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove1);
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove0);
myPanel.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown2);
myPanel.addEventListener(MouseEvent.MOUSE_MOVE,MouseMove2);
myPanel.addEventListener(MouseEvent.MOUSE_UP,MouseUp2);
break;}
case 3:{
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove4);
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove1);
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove0);
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove2);
myPanel.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown0);
myPanel.addEventListener(MouseEvent.MOUSE_MOVE,MousMove3);
myPanel.addEventListener(MouseEvent.MOUSE_UP,MouseUp0);

break;}
case 4:{
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove1);
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove0);
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMove2);
myPanel.removeEventListener(MouseEvent.MOUSE_MOVE,MousMove3);
myPanel.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown1);
myPanel.addEventListener(MouseEvent.MOUSE_MOVE,MouseMove4);
myPanel.addEventListener(MouseEvent.MOUSE_UP,MouseUp1);
break;}
default :{

break;
}

}
}
//清除白板
private function sendClear():void{

myPanel.contentGroup.graphics.clear();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:Panel x="166" y="10" width="635" height="530" id="Pan" >
<s:BorderContainer id="myPanel"

width="100%"
height="402"
buttonMode="true"
>
<mx:Image id="testImage" alpha="1" x="0" y="2" width="631" height="398"></mx:Image>
</s:BorderContainer>
<s:HGroup x="-2" y="410" width="623" height="35" verticalAlign="middle" gap="8" paddingLeft="20">
<s:Button label="画笔" width="50" click="changeDraw(0);"/>
<s:Button label="矩形" width="55" click="changeDraw(1);"/>
<s:Button label="圆形" width="57" click="changeDraw(2);"/>
<s:Button label="椭圆" width="57" click="changeDraw(3);"/>
<s:Button label="橡皮擦" width="57" click="changeDraw(4);"/>
<s:Button label="清空" width="57" click="sendClear();"/>
</s:HGroup>
<s:HGroup x="1" y="453" width="623" height="38" verticalAlign="middle" paddingLeft="20">
<s:Label width="60" height="23" y="5" text="线条大小：" fontSize="12" verticalAlign="middle"/>
<s:HSlider width="71" id="xiantiao_H" value="{xiantiao_size}"/>
<s:Label width="60" height="23" text="线条颜色：" fontSize="12" verticalAlign="middle"/>
<mx:ColorPicker id="Color_pick" selectedColor="{Color_xiantiao}"/>
<s:Label width="50" height="23" text="透明度：" fontSize="12" verticalAlign="middle"/>
<s:HSlider width="71" id="toumingdu_HS" value="{toumingdu_size}"/>
<s:Label width="63" height="23" text="填充颜色：" fontSize="12" verticalAlign="middle"/>
<mx:ColorPicker id="Color_Tianchong" selectedColor="{Color_tianchongse}"/>
<s:Label width="65" height="23" text="字体颜色：" fontSize="12" verticalAlign="middle"/>
<mx:ColorPicker id="Color_zhiti" selectedColor="{Colo_zhitise}"/>
</s:HGroup>
</s:Panel>

</s:Application>