C++博客-xiaoguozi's Blog-随笔分类-Flex

BitmapData 详解（一）(转）

小果子 — Fri, 10 Jun 2011 09:39:00 GMT

在ActionScript 3.0中，可以创建位图图像，还可以把外部的位图图像加载到Flash Player中。使用位图类，可以处理位图的像素和杂点。通过滤镜类，还可以增加位图的各种滤镜效果。

19.1 位图类

常用的有关位图的类有三个：Bitmap类、BitmapData类和BitmapDataChannel类。Bitmap类用来显示位图图像，BitmapData类用来处理位图，BitmapDataChannel类是个枚举值，表示使用的通道。

19.1.1 Bitmap类

Bitmap类表示位图图像的显示对象。可以使用Bitmap类的构造函数创建图像，也可以使用Loader类加载外部图像。Bitmap类常用的属性如表19.1所示。

表19.1 Bitmap类常用的属性

^属^性	^说^明
^bitmapData	^被引用的^BitmapData^对象
^{pixelSnapping}	^控制^Bitmap^{对象是否贴紧至最近的像素}
^smoothing	^{控制在缩放时是否对位图进行平滑处理}

19.1.2 BitmapData类

BitmapData类用来处理Bitmap对象的数据。BitmapData类可以在程序运行时，任意调整位图的大小、透明度、像素等。BitmapData类常用的属性如表19.2所示，常用的方法如表19.3所示。

表19.2 BitmapData类常用的属性

^属^性	^说^明
^height	^{位图图像的高度}
^rect	^{定义位图图像大小和位置的矩形}
^transparent	^{定义位图图像是否支持每个像素具有不同的透明度}
^width	^{位图图像的宽度}

表19.3 BitmapData对象常用的方法

^方^法	^说^明
^applyFilter	^{取得一个源图像和一个滤镜对象，并生成过滤的图像}
^clone	^{返回一个新的}^BitmapData^{对象，它是对原始实例的克隆，包含与原始实例所含位图完全相同的副本}
^{colorTransform}	^使用^{ColorTransform}^{对象调整位图图像的指定区域中的颜色值}
^compare	^比较两个^BitmapData^对象
^copyChannel	^{将数据从另一个}^BitmapData^{对象或当前}^BitmapData^{对象的一个通道传输到当前}^BitmapData^{对象的某个通道中}
^copyPixels	^{为没有拉伸、旋转或色彩效果的图像之间的像素处理提供一个快速例程}
^dispose	^{释放用来存储}^BitmapData^{对象的内存}
^draw	^使用^{Flash Player}^{矢量渲染器在位图图像上绘制}^source^显示对象
^fillRect	^{使用指定的}^ARGB^{颜色填充一个矩形像素区域}
^floodFill	^{对图像执行倾倒填充操作，从（}^{x, y}^{）坐标开始，填充一种特定的颜色}
^{generateFilterRect}	^已知^BitmapData^{对象、源矩形和滤镜对象，确定}^{applyFilter()}^{方法调用所影响的目标矩形}
^{getColorBoundsRect}	^{确定矩形区域是将位图图像中指定颜色的所有像素完全包括起来（如果将}^findColor^{参数设置为}^true^{），还是将不包括指定颜色的所有像素完全包括起来（如果将}^findColor^{参数设置为}^false^）
^getPixel	^{返回一个整数，它表示}^BitmapData^{对象中在特定点（}^{x, y}^）^处的^RGB^像素值
^getPixel32	^返回一个^ARGB^{颜色值，它包含}^Alpha^{通道数据和}^RGB^数据
^getPixels	^{从像素数据的矩形区域生成一个字节数组}
^hitTest	^{在一个位图图像与一个点、矩形或其他位图图像之间执行像素级的点击检测}
^lock	^{锁定图像，以使引用}^BitmapData^{对象的任何对象（如}^Bitmap^{对象）在此}^BitmapData^{对象更改时不会更新}
^merge	^{对每个通道执行从源图像向目标图像的混合}
^noise	^{使用表示随机杂点的像素填充图像}
^paletteMap	^{重新映射一个具有最多四组调色板数据（每个通道一组）的图像中的颜色通道值}
^perlinNoise	^生成^Perlin^杂点图像
^{pixelDissolve}	^{执行源图像到目标图像的像素溶解，或使用同一图像执行像素溶解}
^scroll	^按某一（^{x, y}^{）像素量滚动图像}
^setPixel	^设置^BitmapData^{对象的单个像素}
^setPixel32	^设置^BitmapData^{对象单个像素的颜色和}^Alpha^透明度值
^setPixels	^{将字节数组转换为像素数据的矩形区域}
^threshold	^{根据指定的阈值测试图像中的像素值，并将通过测试的像素设置为新的颜色值}
^unlock	^{解除锁定图像，以使引用}^BitmapData^{对象的任何对象（如}^Bitmap^{对象）在此}^BitmapData^{对象更改时更新}

19.1.3 创建位图类

通常情况下，Bitmap类和BitmapData类是结合在一起使用的。Bitmap类的构造函数的语法格式如下所示：

Bitmap(bitmapData:BitmapData = null, pixelSnapping:String = "auto", smoothing:Boolean = false)

其各个参数的说明如下。

— bitmapData：被引用的BitmapData对象。

— pixelSnapping：默认值为auto，表示Bitmap对象是否贴紧至最近的像素。

— smoothing：默认值为false，表示在缩放时是否对位图进行平滑处理。

BitmapData类的构造函数的语法格式如下所示：

BitmapData(width:int, height:int, transparent:Boolean = true, fillColor:uint = 0xFFFFFFFF)

其各个参数的说明如下。

— width：位图图像的宽度，以像素为单位。

— height：位图图像的高度，以像素为单位。

— transparent：指定位图图像是否支持每个像素具有不同的透明度。

— fillColor：用于填充位图图像区域的32位ARGB颜色值。

下面的示例使用两个位图类，创建一个矩形，代码如下所示：

package

{

import flash.display.Sprite;

import flash.display.Bitmap;

import flash.display.BitmapData;

public class BitmapExample extends Sprite

{

/********************

* 构造函数

* */

public function BitmapExample(

)

{

// 创建BitmapData类

var bitmap:BitmapData = new BitmapData(400, 300, true, 0x500066FF);

// 创建Bitmap类

var image:Bitmap = new Bitmap(bitmap);

// 设置显示位置

image.x = 90;

image.y = 50;

// 增加到舞台

addChild(image);

}

编译代码并运行，结果如图19.1所示。

图19.1 创建位图类

19.1.4 加载外部图像

除了在内部创建位图之外，还可以加载外部的图像到位图中。加载外部的图像，需要用到Loader对象。通过Loader对象的load()方法，可以加载外部的URL。下面的示例使用Loader对象，加载外部图像到位图中，代码如下所示：

package

{

import flash.display.Sprite;

import flash.display.Loader;

import flash.events.Event;

import flash.net.URLRequest;

import flash.display.Bitmap;

import flash.display.BitmapData;

public class BitmapExample extends Sprite

{

private var loader:Loader = new Loader();

/********************

* 构造函数

* */

public function BitmapExample()

{

// 侦听数据加载

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

// 外部图像URL

loader.load(new URLRequest("Bitmap.jpg"));

}

/********************

* 加载外部图像到位图

* */

public function onComplete(event:Event):void

{

// 创建位图

var image:Bitmap = Bitmap(loader.content);

var bitmap:BitmapData = image.bitmapData;

addChild(image);

// 设置

image.x = 20;

image.y = 30;

}

编译代码并运行，结果如图19.2所示。

图19.2 加载外部图像

19.2 像素的处理

在BitmapData类中，包含了一组用于像素处理的方法。使用这些方法可以处理单个像素，还可以处理像素数组。

19.2.1 处理单个像素

处理单个像素用到的方法包括：getPixel()、getPixel32()、setPixel()和setPixel32()。

1．getPixel()方法

getPixel()方法表示在指定的点获取位图的RGB像素。此方法有两个参数，分别是指定点的横坐标和纵坐标。其语法格式如下所示：

getPixel(x:int, y:int):uint

参数的详细说明如下。

— x：指定点的横坐标。

— y：指定点的纵坐标。

下面的示例使用getPixel()方法获取点（1,1）的RGB像素值，代码如下所示：

package

{

import flash.display.Sprite;

import flash.display.Bitmap;

import flash.display.BitmapData;

public class BitmapExample extends Sprite

{

/********************

* 构造函数

* */

public function BitmapExample()

{

// 创建BitmapData类

var bitmap:BitmapData = new BitmapData(400, 300, false, 0xCC66FF);

// 设置像素

var i:uint = bitmap.getPixel(1, 1);

// 输出获取的像素

trace(i.toString(16));

}

编译代码并运行，输出的效果如图19.3所示。

图19.3 使用getPixel()方法处理单个像素

2．getPixel32()方法

getPixel32()方法与getPixel()方法类似，区别是getPixel32()方法返回一个ARGB的像素值。其中返回值包含了透明度的值。其语法格式如下所示：

getPixel32(x:int, y:int):uint

参数的详细说明如下。

— x：指定点的横坐标。

— y：指定点的纵坐标。

下面的示例使用getPixel32()方法，返回指定点的像素值，代码如下所示：

package

{

import flash.display.Sprite;

import flash.display.Bitmap;

import flash.display.BitmapData;

public class BitmapExample extends Sprite

{

/********************

* 构造函数

* */

public function BitmapExample()

{

// 创建BitmapData类

var bitmap:BitmapData = new BitmapData(400, 300, true, 0x50CC66FF);

// 设置像素

var i:uint = bitmap.getPixel32(1, 1);

// 输出获取的像素

trace(i.toString(16));

}

编译代码并运行，输出的结果如图19.4所示。

图19.4 使用getPixel32()方法处理单个像素

3．setPixel()方法

setPixel()方法用来设置BitmapData对象的单个像素。此方法有三个参数，前两个参数表示要设置单个像素的点，第三个参数color表示生成的像素RGB颜色。其语法格式如下所示：

setPixel(x:int, y:int, color:uint):void

参数的详细说明如下所示：

— x：像素值会更改的像素的x位置。

— y：像素值会更改的像素的y位置。

— color：生成的像素的RGB颜色。

下面的示例使用setPixel()方法，循环设置某些点的像素的RGB颜色，代码如下所示：

package

{

import flash.display.Sprite;

import flash.display.Bitmap;

import flash.display.BitmapData;

public class BitmapExample extends Sprite

{

/********************

* 构造函数

* */

public function BitmapExample()

{

// 创建BitmapData类

var bitmap:BitmapData = new BitmapData(400, 300, false, 0x000066FF);

// 设置像素

for(var i:uint = 0; i < 300; i++)

{

bitmap.setPixel(20, i, 0xFFFFFF);

bitmap.setPixel(80, i, 0x000000);

bitmap.setPixel(160, i, 0x00CC00);

}

// 创建Bitmap类

var image:Bitmap = new Bitmap(bitmap);

// 设置显示位置

image.x = 90;

image.y = 50;

// 增加到舞台

addChild(image);

}

编译代码并运行，结果如图19.5所示。

图19.5 setPixel()方法处理单个像素

4．setPixel32()方法

setPixel32()方法与setPixel()方法类似，不同的是，setPixel32()方法是设置ARGB（其中A表示透明度）的像素值。此方法的前两个参数与setPixel()方法相同，最后一个参数表示生成的像素的ARGB颜色。其语法格式如下所示：

setPixel32(x:int, y:int, color:uint):void

参数的详细说明如下所示：

— x：像素值会更改的像素的x位置。

— y：像素值会更改的像素的y位置。

— color：生成的像素的ARGB颜色。

下面的示例使用setPixel32()方法，循环设置某些点的像素值，代码如下所示：

package

{

import flash.display.Sprite;

import flash.display.Bitmap;

import flash.display.BitmapData;

public class BitmapExample extends Sprite

{

/********************

* 构造函数

* */

public function BitmapExample()

{

// 创建BitmapData类

var bitmap:BitmapData = new BitmapData(400, 300, true, 0x700066FF);

// 设置像素

for(var i:uint = 0; i < 300; i++)

{

bitmap.setPixel32(20, i, 0x20FF0000);

bitmap.setPixel32(21, i, 0x40FF0000);

bitmap.setPixel32(22, i, 0x60FF0000);

bitmap.setPixel32(23, i, 0x80FF0000);

bitmap.setPixel32(24, i, 0x00FF0000);

}

// 创建Bitmap类

var image:Bitmap = new Bitmap(bitmap);

// 设置显示位置

image.x = 90;

image.y = 50;

// 增加到舞台

addChild(image);

}

编译代码并运行，结果如图19.6所示。

图19.6 使用setPixel32()方法处理单个像素

19.2.2 处理多个像素

ActionScript 3.0除了能处理单个像素外，还能处理多个像素。处理多个像素，一般是与字节数组有关的，把字节数组与像素的矩形区域相互转换。与处理多个元素有关的方法有两个：getPixels()和setPixels()。

1．getPixels()方法

getPixels()方法将像素的矩形区域转换为一个字节数组并返回。getPixels()方法有一个参数，表示当前BitmapData对象中的一个矩形区域。其语法格式如下所示：

getPixels(rect:Rectangle):ByteArray

下面的示例使用getPixels()方法获取矩形区域的像素值，代码如下所示：

package

{

import flash.display.Sprite;

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.geom.Rectangle;

import flash.utils.ByteArray;

public class BitmapExample extends Sprite

{

/********************

* 构造函数

* */

public function BitmapExample()

{

// 创建BitmapData类

var bitmap:BitmapData = new BitmapData(400, 300, true, 0x700066FF);

var bounds:Rectangle = new Rectangle(0, 0,bitmap.width, bitmap.height);

var pixels:ByteArray = bitmap.getPixels(bounds);

trace("像素数组的长度" + pixels.length);

trace("以下是取几个元素的值：");

trace(pixels[0]);

trace(pixels[4]);

trace(pixels[6]);

trace(pixels[10]);

}

编译代码并运行，输出的结果如图19.7所示。

图19.7 使用getPixels()方法处理多个像素

2．setPixels()方法

setPixels()方法将字节数组转换为像素的矩形区域。其语法格式如下所示：

setPixels(rect:Rectangle, inputByteArray:ByteArray):void

参数说明如下。

— rect：指定BitmapData对象的矩形区域。

— inputByteArray：一个字节数组对象，由要在矩形区域中使用的32位未经过相乘的像素值组成。

package

{

import flash.display.Sprite;

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.geom.Rectangle;

import flash.utils.ByteArray;

public class BitmapExample extends Sprite

{

/********************

* 构造函数

* */

public function BitmapExample()

{

// 创建BitmapData对象

var bmd1:BitmapData = new BitmapData(200, 200, true, 0xFFCCCCCC);

var bmd2:BitmapData = new BitmapData(200, 200, true, 0xFFFF0000);

// 创建获取像素的矩形区域

var rect:Rectangle = new Rectangle(20, 20, 150, 150);

var bytes:ByteArray = bmd1.getPixels(rect);

// 设置像素

bytes.position = 0;

bmd2.setPixels(rect, bytes);

// 创建Bitmap对象

var bm1:Bitmap = new Bitmap(bmd1);

addChild(bm1);

var bm2:Bitmap = new Bitmap(bmd2);

addChild(bm2);

// 设置位置

bm1.x = 50;

bm1.y = 100;

bm2.x = 260;

bm2.y = 100;

}

编译代码并运行，结果如图19.8所示。

http://leo398.blog.51cto.com/658992/341950

小果子 2011-06-10 17:39 发表评论

flex学习网站

小果子 — Mon, 26 Jul 2010 13:17:00 GMT

推荐几个不错的Flex学习网站

    还在为学Flex找不到较好的资源发愁吗？大象给你推荐几个还不错的网站，保证不是骗点击。^_^
    1、http://www.adobe.com/cn/devnet/
    adobe中文开发网站，主页信息很多，我们关注其中的Flex和ActionScript。如果你喜欢桌面应用，AIR肯定有你感兴趣的东西。对于Flex的学习，官方网站当然是第一选择。
    2、http://blog.flexexamples.com/
    Flex例子的海洋，主要以组件如何使用或者类的某某属性如何使用举例说明。minidx中的绝大部分都是翻译这里的文章。英文好的银就去这里看吧，里面已经有很多关于Flex4的东东了。
    3、http://blog.minidx.com/
    这网站的博主是一个很勤奋的家伙，里面有很丰富的关于Flex的实例，很有学习价值。主要是翻译flexexamples里面的文章，也有自己的原创。对于英文不好的朋友，这里就是你的首选了。最近去看时发现，博主准备换服务器了，不知道域名变不变，大象会随时关注并更新滴。
    4、http://flex.org/
    大名鼎鼎的Flex权威网站，集成了与Flex有关的大多数信息，最令人兴奋的是它无比丰富的组件库。只要你耐心找，就可以找到你想要的。拿来使用是其次，学习高手的源码才是最重要的。
    5、http://ntt.cc/
    国外的关于Flex方面的又一个重量级网站，不说废话了，看了就知道。
    6、http://www.actionscriptclasses.com/
    很全的一个类库网站，全世界的Flexer在这里共享自己的AS类。如果有不会写的，先来这里看看，很可能有人已经放上去了。呵呵！
    7、http://www.9ria.com/html/index.html
    天地会，国内非常大的一个RIA技术综合站点，也是开发者的交流平台，推荐大家经常去看看。
    8、www.airia.cn
    艾睿网，富IT技术开发者社区，有比较丰富的入门教程。

小果子 2010-07-26 21:17 发表评论

flex 获取 flickr 图片

小果子 — Tue, 20 Jul 2010 14:10:00 GMT

这两天主要看了flex的cairngorm框架，顺便写了个用flex获取flickr网站的图片,其中不乏艰难的过程,第一个就是flickr库api和实际编译出来的有出入,其中Photo.as缺少farm就是一个明显，所以只能自己手工修改源码重新编译,网上讨论这个问题的比较少，不知道为什么，我找了好久才找到一篇关于这个的。还有一个问题就是大墙，其中网上有段这么描述:

最近打开Flickr发现有些图片总是显示小红叉，开始以为是网速问题没有在意，昨天有个朋友说他存在Flickr上的图片都不能显示了，发觉情况不对劲了。
今天看到了这篇帖子：http://www.flickr.com/help/forum/zh-hk/117995/
原来又是伟大的墙在作怪，这次的症状是所有的网通线路都无法访问farm3.static.flickr.com和farm5.static.flickr.com这两个服务器，由于这次只是让域名无法解析，所以最简单的解决办法是修改host文件，方法如下：
用记事本打开C:\Windows\System32\drivers\etc\hosts 这个文件，然后在文件最后追加两行:

然后重启一下浏览器，我们亲爱的Flickr又复活了 : )

由于自己是网通的，图片是farm5服务器的，所以图片也显示不了，不过修改下host表就OK了

写这个的主要目的还是学习下cairgorm框架，学习他的MVC思想，目的算基本达到，flickr的问题实在有点烦，不过还是走过来了，下面是运行效果:

有用的几个网址：
http://code.google.com/p/as3flickrlib/issues/detail?id=14#makechanges
http://www.flickr.com/services/api/
http://naramiki.blogbus.com/logs/57133710.html

最后附上flickr自己编译的库
http://www.cppblog.com/Files/guojingjia2006/flickr087.swc.rar

小果子 2010-07-20 22:10 发表评论

flex (DragManager)

小果子 — Tue, 15 Jun 2010 12:44:00 GMT

    creationComplete="init()" layout="absolute">

        Application{
            fontSize:12pt;
        }



            import mx.events.DragEvent;
            import mx.core.DragSource;
            import mx.managers.DragManager;

            private function init():void{

            }
            private function dragIt(e:MouseEvent):void{
                var myCanvas:Canvas=e.currentTarget as Canvas;
                var dataSource:DragSource=new DragSource();
                dataSource.addData(e.currentTarget,"obj");
                DragManager.doDrag(myCanvas,dataSource,e);
            }
            private function dragEnter(e:DragEvent):void{
                var dropTarger:HBox=e.currentTarget as HBox;
                DragManager.acceptDragDrop(dropTarger);
            }
            private function dragDrop(e:DragEvent):void{
                var obj:Canvas=e.dragSource.dataForFormat("obj") as Canvas;
                setCount(e.currentTarget as HBox,obj);
                //var tb:HBox=(e.currentTarget as HBox);
                //tb.addChild(obj);
                //trace(e.currentTarget.toString());
                //myCanvas.addChild(e.currentTarget as DisplayObject);
            }
            private function setCount(hbox:HBox,cas:Canvas):void{
                hbox.addChild(cas);
                if(hbox.id=="sellList"){
                    trace("sell");
                }else{
                    trace("buy");
                }
            }
        ]]>




    borderStyle="solid" backgroundColor="red" mouseDown="dragIt(event)" />

    borderStyle="solid" backgroundColor="green" mouseDown="dragIt(event)" />

    borderStyle="solid" backgroundColor="blue" mouseDown="dragIt(event)" />



    borderStyle="solid" width="100" height="100" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)" />

DragManager小应用

小果子 2010-06-15 20:44 发表评论

Flex 鼠标事件触发顺序

小果子 — Mon, 11 Jan 2010 02:01:00 GMT

roll_over roll_out事件根据范围判定
mouse_down mouse_out 根据对象判定
mouse_down mouse_out 先于单击事件触发
双击事件触发时 mouse_down,mouse_out触发二次，单击事件触发一次，第二次单击时不处罚click

小果子 2010-01-11 10:01 发表评论