可以画线,圆,方块,以及截取当前画板图像的功能。
直接上代码吧,我的环境是AIR 2.6, FB4。
ElectronicBoard.mxml 主程序。
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
applicationComplete="init()" layout="absolute"
showTitleBar="false" showStatusBar="false" showFlexChrome="false" borderStyle="none">
<mx:Script>
<![CDATA[
import flash.net.dns.AAAARecord;
import mx.binding.utils.BindingUtils;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.FileSystemList;
import mx.controls.FileSystemTree;
import mx.core.Application;
import mx.core.UIComponent;
import mx.events.FlexEvent;
import mx.graphics.ImageSnapshot;
import mx.graphics.codec.JPEGEncoder;
import mx.managers.PopUpManager;
private var oY:Number;
private var nX:Number;
private var oX:Number;
private var nY:Number;
private var _isDown:Boolean=false;
private var showBasePanelFlag:Boolean=false;
private var _file:File;
private var sprit:Sprite=new Sprite();
private var comUI:UIComponent=new UIComponent();
private var PrObj:Object=new Object();
private var _imgByteArray:ByteArray;
private var saveDirectoryPath:String;
[Bindable]
private var pop1:ConsolePanel;
private function init():void
{
//全屏
systemManager.stage.addEventListener(FullScreenEvent.FULL_SCREEN,fullScreenHand);
systemManager.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
//清除画板
myPanel.removeAllChildren();
myPanel.visible=true;
//0x869ca7设置画笔颜色。
myPanel.graphics.lineStyle(0,0xFFFFFF,0);
//绘制一个透明度为0.1的画板。
myPanel.graphics.beginFill(0xFFFFFF,0.1);
myPanel.graphics.drawRect(0,0,this.width,this.height);
myPanel.graphics.endFill();
//添加鼠标事件监听,即画笔动作的处理。
myPanel.addEventListener(MouseEvent.MOUSE_DOWN,downHandler);
myPanel.addEventListener(MouseEvent.MOUSE_MOVE,moveHandler);
myPanel.addEventListener(MouseEvent.MOUSE_UP,upHandler);
//弹出设置面板
pop1 = ConsolePanel(PopUpManager.createPopUp(myPanel,ConsolePanel,false));
//鼠标移动到设置面板上时,显示设置面板,否则隐藏到屏幕上方。
pop1.addEventListener(MouseEvent.ROLL_OVER,moveImage);
pop1.addEventListener(MouseEvent.ROLL_OUT,moveout);
//初始化设置面板位置。
pop1.x = (stage.width - pop1.width)/2;
pop1.y = -220;
//设置面板上的按钮事件处理。
pop1.btn_cancel.addEventListener(MouseEvent.CLICK,btn_cancel_clickHandler);
pop1.btn_reset.addEventListener(MouseEvent.CLICK,btn_reset_clickHandler);
pop1.btn_recovery.addEventListener(MouseEvent.CLICK,btn_recovery_clickHandler);
pop1.prScrn.addEventListener(MouseEvent.CLICK,prScrn_clickHandler);
//设置面板中保存清除,撤消,恢复等操作所涉及对象的集合。
if(pop1.indexList.length!=0)
{
pop1.indexList.removeAll();
}
if(pop1.tempDel.length!=0)
{
pop1.tempDel.removeAll();
}
}
private function fullScreenHand(evt:FullScreenEvent):void{
if(evt.fullScreen)
{}
else
{//一旦退出全屏即退出系统。
this.exit();
}
}
//---------截屏----------------
protected function prScrn_clickHandler(event:MouseEvent):void
{
var now:Date=new Date();
var encode:JPEGEncoder=new JPEGEncoder(100);
var m : Matrix = new Matrix();
//ImageSnapshot类抓取myPanel面板的BitmapData
var bmp:BitmapData = ImageSnapshot.captureBitmapData(myPanel,m,null,null,null,true);
bmp.draw(myPanel,m);
//解析为ByteArray
_imgByteArray=encode.encode(bmp);
//设置文件名
var imgName:String="\\"+df.format(now)+".jpg";
//第一次保存图片,打开保存位置对话框选择保存位置。
if (_file == null) {
//默认打开的保存路径为桌面,并且对话框有默认的文件名,文件名为设置的imgName。
_file =new File(File.desktopDirectory.nativePath + imgName);
//对话框标题。
_file.browseForSave("请选择截屏图片的保存位置");
//单击保存按钮派发事件。
_file.addEventListener(Event.SELECT,getSavePathHandler);
//单击取消按钮将判断条件回置为初始状态。
_file.addEventListener(Event.CANCEL,function():void{_file = null;return;});
} else {
//若是第一次以后打开,则_file不为空,saveDirectoryPath值已经在getSavePathHandler方法中赋值,其值为第一次选择的保存路径。
_file =new File(saveDirectoryPath + imgName);
// Alert.show(_file.nativePath);
writeDataToImage();
}
}
//点击保存按钮,触发select事件时的处理函数。
private function getSavePathHandler(event:Event):void
{
_file = event.target as File;
//得到选择的路径,将其转换为数组处理。
var pathDirectoryArr:Array = _file.nativePath.toString().split("\\");
//去掉文件名。
pathDirectoryArr.pop();
// Alert.show(pathDirectoryArr.join("\\"));
//将保存目录的路径保存到saveDirectoryPath变量中。
saveDirectoryPath= pathDirectoryArr.join("\\");
writeDataToImage();
}
//使用文件流生成截图。
private function writeDataToImage():void
{
var filestream:FileStream=new FileStream();
try{
filestream.open(_file,FileMode.WRITE);
filestream.writeBytes(_imgByteArray);
filestream.close();
}catch(e:Error){
Alert.show(e.message);
}
}
//撤销按钮操作。
protected function btn_cancel_clickHandler(event:MouseEvent):void
{
if(pop1.indexList.length != 0 && pop1.indexList.length >= 0)
{
pop1.tempDel.addItem(pop1.indexList.getItemAt(pop1.indexList.length-1));
myPanel.removeChild(pop1.indexList.getItemAt(pop1.indexList.length - 1) as DisplayObject);
pop1.indexList.removeItemAt(pop1.indexList.length-1);
}
}
//-----清空白板按钮操作--------
protected function btn_reset_clickHandler(event:MouseEvent):void
{
myPanel.removeAllChildren();
pop1.indexList.removeAll();
pop1.tempDel.removeAll();
}
//------图形恢复按钮操作-------
protected function btn_recovery_clickHandler(event:MouseEvent):void
{
if(pop1.tempDel.length!=0)
{
pop1.indexList.addItem(pop1.tempDel.getItemAt(pop1.tempDel.length-1))
myPanel.addChild(pop1.tempDel.getItemAt(pop1.tempDel.length-1) as DisplayObject);
pop1.tempDel.removeItemAt(pop1.tempDel.length-1);
}
}
//绘图时,鼠标按下操作处理。
private function downHandler(e:MouseEvent):void
{
_isDown=true;
oX = myPanel.mouseX;
oY = myPanel.mouseY;
sprit=new Sprite();
}
//---------绘图时,鼠标释放操作处理。----------
private function upHandler(e:MouseEvent):void
{
_isDown=false;
oX=myPanel.mouseX;
oY=myPanel.mouseY;
var Num:Number=Number(myPanel.numChildren)-1;
if(pop1.spriteFlag!="截屏")
{
if(Num>=0)
{
pop1.indexList.addItem(myPanel.getChildAt(myPanel.numChildren-1));
}
} else {
//截屏操作只需要保存最后一个绘制上去的图形对象。
PrObj=myPanel.getChildAt(myPanel.numChildren-1);
}
}
//-----鼠标移动事件-----------
private function moveHandler(e:MouseEvent):void
{
if(_isDown)
{
myPanel.graphics.lineStyle(pop1._lineSize,pop1._lineColor,1);
//-----生成线-----------
if(pop1.spriteFlag=="线"){
sprit.graphics.lineStyle(pop1._lineSize,pop1._lineColor,1);//应用线条样式
sprit.graphics.beginFill(0xffffff,1);//图的内部填充
var x:Number = myPanel.mouseX;
var y:Number = myPanel.mouseY;
sprit.graphics.moveTo(oX,oY);
sprit.graphics.lineTo(x,y);
var uiCom:UIComponent=new UIComponent();
uiCom.addChild(sprit);
myPanel.addChild(uiCom);
oX=x;
oY=y;
}
//---生成圆--------
if(pop1.spriteFlag=="圆"){
sprit.graphics.clear();
sprit.graphics.lineStyle(pop1._lineSize,pop1._lineColor,1);
sprit.graphics.beginFill(pop1._fillColor,pop1._fillAlpha);
nX = myPanel.mouseX;
nY = myPanel.mouseY;
var cX:Number=oX+(nX-oX)/2;
var cY:Number=oY+(nY-oY)/2;
var preX:Number =Math.min(oX,nX);
var preY:Number =Math.min(oY,nY);
var cWidth:Number = Math.abs(oX - nX);
var cHeight:Number = Math.abs(oY- nY);
sprit.graphics.drawEllipse(preX,preY,cWidth,cHeight);
var uiCom:UIComponent = new UIComponent();
uiCom.addChild(sprit);
myPanel.addChild(uiCom);
}
//----------生成矩形-------------
if(pop1.spriteFlag=="矩形"){
sprit.graphics.clear();
sprit.graphics.lineStyle(pop1._lineSize,pop1._lineColor,1);
sprit.graphics.beginFill(pop1._fillColor,pop1._fillAlpha);
nX=myPanel.mouseX;
nY=myPanel.mouseY;
sprit.graphics.drawRect(oX,oY,nX-oX,nY-oY);
var uiCom:UIComponent = new UIComponent();
uiCom.addChild(sprit);
myPanel.addChild(uiCom);
}
//----------生成截屏区域-------------
if(pop1.spriteFlag=="截屏"){
//sprit=new Sprite();
sprit.graphics.clear();
sprit.graphics.lineStyle(pop1._lineSize,pop1._lineColor,1);
sprit.graphics.beginFill(pop1._fillColor,pop1._fillAlpha);
nX=myPanel.mouseX;
nY=myPanel.mouseY;
sprit.graphics.drawRect(oX,oY,nX-oX,nY-oY);
comUI.addChild(sprit);
comUI.width=sprit.width;
comUI.height=sprit.height;
myPanel.addChild(comUI);
}
}
}
//----------移出浮动窗-------
private function moveImage(event:MouseEvent):void {
myMoveIn.play();
}
//----------移走浮动窗------
private function moveout(event:MouseEvent):void{
myMoveOut.play();
}
]]>
</mx:Script>
<mx:DateFormatter id="df" formatString="YYYY-MM-DD JJ-NN-SS"/>
<mx:Move id="myMoveIn" target="{pop1}" duration="300" yTo="0" />
<mx:Move id="myMoveOut" target="{pop1}" duration="300" yTo="-230" />
<mx:Canvas width="100%" height="100%" id="myPanel" borderStyle="solid" fontSize="12" backgroundSize="100%">
</mx:Canvas>
</mx:WindowedApplication>
设置面板ConsolePanel.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
width="500" height="242" fontSize="12"
creationComplete="canvas1_creationCompleteHandler(event)" alpha="1">
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.CollectionEvent;
import mx.events.FlexEvent;
import mx.utils.ColorUtil;
import mx.utils.StringUtil;
[Bindable]
public var _lineSize:int=1;
[Bindable]
public var _lineColor:uint=0x000000;
[Bindable]
public var _fillAlpha:Number=0;
[Bindable]
public var _fillColor:uint=0xffffff;
private var _changeLineFlag:Boolean = false;
private var _changeFillFlag:Boolean = false;
public var spriteFlag:String="线";
public var indexList:ArrayCollection=new ArrayCollection();//myPanel显示对象
public var tempDel:ArrayCollection=new ArrayCollection();//临时删除对象
private function canvas1_creationCompleteHandler(event:FlexEvent):void
{
BindingUtils.bindProperty(this,"_lineSize",hs,"value");
BindingUtils.bindProperty(this,"_fillAlpha",fillalpha,"value");
indexList.addEventListener(CollectionEvent.COLLECTION_CHANGE,listChange);
tempDel.addEventListener(CollectionEvent.COLLECTION_CHANGE,tempDelChange);
}
private function listChange(evt:CollectionEvent):void
{
if(indexList.length==0)
{
btn_cancel.enabled=false;
btn_reset.enabled=false;
}
else
{
btn_cancel.enabled=true;
btn_reset.enabled=true;
}
}
private function tempDelChange(evt:CollectionEvent):void
{
if(tempDel.length==0)
{
btn_recovery.enabled=false;
}
else
{
btn_recovery.enabled=true;
}
}
//设置线条颜色和填充颜色时,例如设置线条颜色,需要首先点击线条颜色方块,在点击下方八个颜色方块中的任意一色,可更换线条颜色。
private function changeColor(event:MouseEvent):void
{
var colorValue:uint = (event.target as GridItem).getStyle("backgroundColor");
// Alert.show("_changeLineFlag :"+_changeLineFlag +" _changeFillFlag : "+_changeFillFlag+" colorValue:"+colorValue);
if (_changeLineFlag) {
_lineColor = colorValue;
}
if (_changeFillFlag) {
_fillColor = colorValue;
}
}
]]>
</mx:Script>
<mx:Canvas id="spritPanelBox" width="100%" height="100%" backgroundColor="#5599AA" alpha="0.6">
<mx:Canvas id="chooseBox" width="472" height="194" x="0" y="0">
<mx:Label text="线条色" fontWeight="bold" x="10" y="18"/>
<mx:Label text="填充色" fontWeight="bold" x="129" y="18"/>
<mx:Button label="椭圆" id="circle" icon="@Embed(source='img/圆.png')" click="this.spriteFlag='圆';" width="75.2" x="242.8" y="82"/>
<mx:Button label="线" id="line" icon="@Embed(source='img/线 .png')" click="this.spriteFlag='线';" width="75.2" x="242.75" y="14"/>
<mx:Button label="矩形" id="rect" icon="@Embed(source='img/矩形.png')" click="this.spriteFlag='矩形'" width="75.2" x="242.8" y="48"/>
<mx:Button label="截屏" id="prScrn" icon="@Embed(source='img/截屏.png')" x="410" y="39" labelPlacement="bottom"/>
<mx:Button label="撤消" id="btn_cancel" icon="@Embed(source='img/撤销.png')" enabled="false" x="326" y="14"/>
<mx:Button label="清除" id="btn_reset" icon="@Embed(source='img/清除.png')" enabled="false" x="326" y="48"/>
<mx:Button label="恢复" id="btn_recovery" icon="@Embed(source='img/恢复.png')" enabled="false" width="77.5" x="326" y="82"/>
<mx:HBox width="100%" horizontalGap="23" verticalGap="0" x="0" y="148" height="39">
<mx:VBox verticalGap="0" width="229" height="39">
<mx:HSlider id="hs" value="{_lineSize}" minimum="1" maximum="20" snapInterval="1" tickInterval="1" liveDragging="true"/>
<mx:Label id="lb_lineSize" text="笔刷大小:{hs.value}px"/>
</mx:VBox>
<mx:VBox verticalGap="0" height="39">
<mx:HSlider id="fillalpha" value="{_fillAlpha}" minimum="0" maximum="1" tickInterval="0.1" snapInterval="0.1" liveDragging="true"/>
<mx:Label id="lb_fillAlpha" text="填充区透明度:{fillalpha.value}"/>
</mx:VBox>
</mx:HBox>
<mx:HRule x="0" y="136" width="462" height="1"/>
<mx:TextInput id="fillColor" x="180" y="16" width="30" height="25" backgroundColor="{_fillColor}" focusRect="false" editable="false" focusIn="_changeFillFlag = true;" focusOut="_changeFillFlag = false;"/>
<mx:TextInput id="lineColor" x="62" y="16" width="30" height="25" backgroundColor="{_lineColor}" focusRect="false" editable="false" focusIn="_changeLineFlag = true;" focusOut="_changeLineFlag = false;"/>
<mx:Grid x="10" y="46" width="224.8" height="73">
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%" backgroundColor="black" click="changeColor(event)">
</mx:GridItem>
<mx:GridItem width="100%" height="100%" backgroundColor="white" click="changeColor(event)">
</mx:GridItem>
<mx:GridItem width="100%" height="100%" backgroundColor="gray" click="changeColor(event)">
</mx:GridItem>
<mx:GridItem width="100%" height="100%" backgroundColor="yellow" click="changeColor(event)">
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%" backgroundColor="purple" click="changeColor(event)">
</mx:GridItem>
<mx:GridItem width="100%" height="100%" backgroundColor="red" click="changeColor(event)">
</mx:GridItem>
<mx:GridItem width="100%" height="100%" backgroundColor="green" click="changeColor(event)">
</mx:GridItem>
<mx:GridItem width="100%" height="100%" backgroundColor="blue" click="changeColor(event)">
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:Canvas>
</mx:Canvas>
</mx:TitleWindow>
146

被折叠的 条评论
为什么被折叠?



