Flex 画面快照截图及显示实现代码
更新时间：2009年10月26日 22:31:51 作者：
在软件开发过程中经常会有对画面进行快照截图的需求，例如把画面当前显示的状态捕捉下来保存成图片。接下来讨论如何在flex中对画面进行截图，画面截图完成后怎样再显示到画面上。
一、对指定画面进行快照、截图。
在Flex SDK中flash.display包下面有两个类Bitmap和BitmapData。在flex中可以通过两个类对图片进行操作。BitmapData类中有一个draw方法这个方法的第一个参数是进行画面截图的源对象，这个对象必须实现IBitmapDrawable接口。而DisplayObject类实现了这个接口，DisplayObject是所有可见控件的先祖类，也就意味着所有在flex可以看到的画面、控件都可以用draw方法来进行快照截图。
具体的代码如下：
private var bmpImage:Bitmap = null;
private function onClick():void
{
//创建一个大小和截图对象一致的图片
var bmpData:BitmapData = new BitmapData(source.width,source.height);
//进行快照截图，其中第二个参数Matrix是对图片进行变换用的，例如旋转缩放等。
//如果图片不需要变换可以用new Matrix()或者null都可以。
bmpData.draw(source,new Matrix());
//创建Bitmap对象
bmpImage = new Bitmap(bmpData);
}
BitmapData对象不能直接显示到画面上，所以需要把BitmapData对象封装到Bitmap中，按下截图按钮后，Panel的快照就生成了，保存到了Bitmap对象中。
效果图片：
二、将捕获到的截屏图片显示到画面上。
接下来就是把Bitmap对象显示到画面上，这里需要借助UIComponent类。由于直接把Bitmap对象加到Canvas等容器中，运行时会出错，因为容器中添加的子对象必须是UIComponent的子类，而Bitmap不是，所以需要UIComponent类来封装一层。然后把UIComponent对象加入到Canvas容器中，这样图片就显示出来了。
代码如下所示：
private function onShow():void
{
//创建一个UIComponent对象
var uic:UIComponent = new UIComponent();
//将Bitmap对象加入到UIComponent对象中
uic.addChild(bmpImage);
//将UIComponent对象加入Canvas中
showImage.addChild(uic);
}
先按下截图按钮进行截图操作，然后按下显示按钮把截图显示到Canvas中。效果如图所示。
三、以下是这个程序的完整代码：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
fontFamily="宋体" fontSize="12" width="831" height="448">
<mx:Panel id="source" x="26" y="77" width="320" height="263" layout="absolute">
<mx:TextInput x="91" y="51"/>
<mx:TextInput x="91" y="106"/>
<mx:Button x="73.5" y="158" label="取 消"/>
<mx:Button x="172.5" y="158" label="确 定"/>
<mx:Label x="32" y="53" text="用户名："/>
<mx:Label x="32" y="108" text="密 码："/>
<mx:Label x="109" y="10" text="用户登录" fontWeight="bold"/>
</mx:Panel>
<mx:Canvas id="showImage" x="427" y="58" width="347" height="292">
</mx:Canvas>
<mx:Label x="124" y="32" text="截图区域"/>
<mx:Label x="562" y="32" text="截图显示区域"/>
<mx:Button x="147" y="394" label="截图" click="onClick()"/>
<mx:Button x="548" y="394" label="显示" click="onShow()"/>
<mx:Script>
<!--[CDATA[
import mx.core.UIComponent;
private var bmpImage:Bitmap = null;
private function onClick():void
{
//创建一个大小和截图对象一致的图片
var bmpData:BitmapData = new BitmapData(source.width,source.height);
//进行快照截图，其中第二个参数Matrix是对图片进行变换用的，例如旋转缩放等。
//如果图片不需要变换可以用new Matrix()或者null都可以。
bmpData.draw(source,new Matrix());
//创建Bitmap对象
bmpImage = new Bitmap(bmpData);
}
private function onShow():void
{
//创建一个UIComponent对象
var uic:UIComponent = new UIComponent();
//将Bitmap对象加入到UIComponent对象中
uic.addChild(bmpImage);
//将UIComponent对象加入Canvas中
showImage.addChild(uic);
}
]]-->
</mx:Script>
</mx:Application>
四、总结。
虽然可以用Bitmap和BitmapData类进行截图和现实，但是flex不能直接读写文件。图片的保存还需要后台程序的配合来完成。
在Flex SDK中flash.display包下面有两个类Bitmap和BitmapData。在flex中可以通过两个类对图片进行操作。BitmapData类中有一个draw方法这个方法的第一个参数是进行画面截图的源对象，这个对象必须实现IBitmapDrawable接口。而DisplayObject类实现了这个接口，DisplayObject是所有可见控件的先祖类，也就意味着所有在flex可以看到的画面、控件都可以用draw方法来进行快照截图。
具体的代码如下：
复制代码 代码如下:
private var bmpImage:Bitmap = null;
private function onClick():void
{
//创建一个大小和截图对象一致的图片
var bmpData:BitmapData = new BitmapData(source.width,source.height);
//进行快照截图，其中第二个参数Matrix是对图片进行变换用的，例如旋转缩放等。
//如果图片不需要变换可以用new Matrix()或者null都可以。
bmpData.draw(source,new Matrix());
//创建Bitmap对象
bmpImage = new Bitmap(bmpData);
}
BitmapData对象不能直接显示到画面上，所以需要把BitmapData对象封装到Bitmap中，按下截图按钮后，Panel的快照就生成了，保存到了Bitmap对象中。
效果图片：
二、将捕获到的截屏图片显示到画面上。
接下来就是把Bitmap对象显示到画面上，这里需要借助UIComponent类。由于直接把Bitmap对象加到Canvas等容器中，运行时会出错，因为容器中添加的子对象必须是UIComponent的子类，而Bitmap不是，所以需要UIComponent类来封装一层。然后把UIComponent对象加入到Canvas容器中，这样图片就显示出来了。
代码如下所示：
复制代码 代码如下:
private function onShow():void
{
//创建一个UIComponent对象
var uic:UIComponent = new UIComponent();
//将Bitmap对象加入到UIComponent对象中
uic.addChild(bmpImage);
//将UIComponent对象加入Canvas中
showImage.addChild(uic);
}
先按下截图按钮进行截图操作，然后按下显示按钮把截图显示到Canvas中。效果如图所示。
三、以下是这个程序的完整代码：
复制代码 代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
fontFamily="宋体" fontSize="12" width="831" height="448">
<mx:Panel id="source" x="26" y="77" width="320" height="263" layout="absolute">
<mx:TextInput x="91" y="51"/>
<mx:TextInput x="91" y="106"/>
<mx:Button x="73.5" y="158" label="取 消"/>
<mx:Button x="172.5" y="158" label="确 定"/>
<mx:Label x="32" y="53" text="用户名："/>
<mx:Label x="32" y="108" text="密 码："/>
<mx:Label x="109" y="10" text="用户登录" fontWeight="bold"/>
</mx:Panel>
<mx:Canvas id="showImage" x="427" y="58" width="347" height="292">
</mx:Canvas>
<mx:Label x="124" y="32" text="截图区域"/>
<mx:Label x="562" y="32" text="截图显示区域"/>
<mx:Button x="147" y="394" label="截图" click="onClick()"/>
<mx:Button x="548" y="394" label="显示" click="onShow()"/>
<mx:Script>
<!--[CDATA[
import mx.core.UIComponent;
private var bmpImage:Bitmap = null;
private function onClick():void
{
//创建一个大小和截图对象一致的图片
var bmpData:BitmapData = new BitmapData(source.width,source.height);
//进行快照截图，其中第二个参数Matrix是对图片进行变换用的，例如旋转缩放等。
//如果图片不需要变换可以用new Matrix()或者null都可以。
bmpData.draw(source,new Matrix());
//创建Bitmap对象
bmpImage = new Bitmap(bmpData);
}
private function onShow():void
{
//创建一个UIComponent对象
var uic:UIComponent = new UIComponent();
//将Bitmap对象加入到UIComponent对象中
uic.addChild(bmpImage);
//将UIComponent对象加入Canvas中
showImage.addChild(uic);
}
]]-->
</mx:Script>
</mx:Application>
四、总结。
虽然可以用Bitmap和BitmapData类进行截图和现实，但是flex不能直接读写文件。图片的保存还需要后台程序的配合来完成。
相关文章
找了很久,还是没有找到包含时间以下的东西,算了,还是麻烦一点,用日期加时间来处理吧.这里需要注意的是,它的时间日期跟其他语言是差不多的.所以要注意进行处理.2009-07-07
因为new ArrayCollection 需要 array对象，event.result是空间返回对象（JAVA方法返回值）所以类型不同无法使用new 构造ArrayCollection ，可是恶心的FLEX偏偏支持javalist=ArrayCollection2009-06-06
Data BindIng简单的说就是当绑定源属性发生变化时，Flex 会把绑定源变化后属性的值赋给目的物的属性。做到了数据同步。2009-09-09
找资料的时候 看到一篇文章很实用 对新手的基本问题都可以找到，方便查找答案的时间2009-05-05
Flex 动态绑定BindingUtils.bindProperty
Flex 动态绑定BindingUtils.bindProperty实现代码。2009-06-06
Flex 放大镜效果实现代码2009-08-08
要过节了,工作任务也完成了,闲来没事,研究svg，感觉市场上对svg支持度不高,导致了这项技术不能够被IT群众充分的接纳，一个没有人支持的技术,她必然也不会有很大的前景。研究来研究去,还是觉得flex比较好玩。2009-09-09
使用过TileList的朋友可能知道，该组件没有Item与Item之间的间距设置。而且theme也没有办法象linkbar那样设置样式corner-radius改变形状。2009-06-06
国庆期间，做了不少基于 flex 的开发工作，对 flex 的布局容器有了进一步深入的理解，也找到不少非常棒的文章，分享到这里方便一下大家。2009-10-10
Share object一般用来保存前来访问的用户的个人信息到用户的机器上。比如用户登陆过后保存他的名字，下次访问时自动显示，或者保存用户的个性化设置等等。2009-06-06
最新评论