Flex画面快照截图及显示
2009-10-26 00:59
351 查看
关键词:Flex,Bitmap,BitmapData,画面快照,截图
在软件开发过程中经常会有对画面进行快照截图的需求,例如把画面当前显示的状态捕捉下来保存成图片。接下来讨论如何在flex中对画面进行截图,画面截图完成后怎样再显示到画面上。
一、对指定画面进行快照、截图。
在Flex SDK中flash.display包下面有两个类Bitmap和BitmapData。在flex中可以通过两个类对图片进行操作。BitmapData类中有一个draw方法这个方法的第一个参数是进行画面截图的源对象,这个对象必须实现
具体的代码如下:
BitmapData对象不能直接显示到画面上,所以需要把BitmapData对象封装到Bitmap中,按下截图按钮后,Panel的快照就生成了,保存到了Bitmap对象中。
效果图片:
http://p.blog.csdn.net/images/p_blog_csdn_net/To9m/EntryImages/20091026/1.PNG
二、将捕获到的截屏图片显示到画面上。
接下来就是把Bitmap对象显示到画面上,这里需要借助UIComponent类。由于直接把Bitmap对象加到Canvas等容器中,运行时会出错,因为容器中添加的子对象必须是UIComponent的子类,而Bitmap不是,所以需要UIComponent类来封装一层。然后把UIComponent对象加入到Canvas容器中,这样图片就显示出来了。
代码如下所示:
先按下截图按钮进行截图操作,然后按下显示按钮把截图显示到Canvas中。效果如图所示。
http://p.blog.csdn.net/images/p_blog_csdn_net/To9m/EntryImages/20091026/2.PNG
三、以下是这个程序的完整代码:
四、总结。
虽然可以用Bitmap和BitmapData类进行截图和现实,但是flex不能直接读写文件。图片的保存还需要后台程序的配合来完成。
在软件开发过程中经常会有对画面进行快照截图的需求,例如把画面当前显示的状态捕捉下来保存成图片。接下来讨论如何在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对象中。
效果图片:
http://p.blog.csdn.net/images/p_blog_csdn_net/To9m/EntryImages/20091026/1.PNG
二、将捕获到的截屏图片显示到画面上。
接下来就是把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中。效果如图所示。
http://p.blog.csdn.net/images/p_blog_csdn_net/To9m/EntryImages/20091026/2.PNG
三、以下是这个程序的完整代码:
<?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 画面快照截图及显示实现代码
- Flex画面快照截图及显示又一方式
- CentOS开机显示画面截图
- 对电影播放器,网络游戏画面截图,则显示一片黑,怎么办?
- Flex4.6 VideoDisplay播放flv视频时画面不清晰,显示字母时有缺损的问题的解决办法。
- SnagIt截图后无法在编辑器打开,不显示截图内容的解决办法
- [Flex] 组件Tree系列 —— 利用firstVisibleItem属性,设置或取得第一个显示节点
- Flex中DataGrid绑定ComboBox ,自动显示行号,增加行,删除行,保存数据
- Flex如何在Alert中显示超链接
- flex -设置柱状图ColumnChart的彩虹柱子、点击单个柱子高亮显示(三)
- flex advanceddatagrid禁止排序,不显示排序倒三角按钮,判断是否有某个属性或方法
- Flex 显示浮动标签Tips
- Flex中控件Datefield的中文显示
- flex自定义组件如何在设计时显示预期结果/已添加控件
- flex 弹窗口嵌套iframe,移动窗体iframe内容不显示了问题处理
- Flex中对文本实现高亮显示
- Android使用BroadcastReceiver实现手机开机之后显示画面的功能
- Flex学习笔记之图片显示策略
- Android系统的开机画面显示过程分析
- flex 组件显示手型 光标