Flex中如何利用Bitmap和BitmapData类复制图片到一个TileList控件的例子

在前面的Flex中利用Bitmap类，BitmapData类以及getPixel()事件获取图片中颜色像素值的例子中，我们了解了如何通过Bitmap类，BitmapData类以及getPixel()来取得颜色值，接下来的例子演示了Flex中如何利用Bitmap和BitmapData类,复制图片到一个TileList控件,每次只要按一下“Copy image”，就会创建一个新的图片对象，然后将其添加到TileList中。本例中其实还演示了如何创建一个HBox容器，Image和Label控件的组合。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：

下面是完整代码(或点击这里察看)：

Download: main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var arrColl:ArrayCollection = new ArrayCollection();
private function dupeImage(source:Image):void {
var data:BitmapData = Bitmap(source.content).bitmapData;
var bitmap:Bitmap = new Bitmap(data);
arrColl.addItem({image:bitmap, label:"item #" + (arrColl.length + 1)});
}
]]>
</mx:Script>
<mx:HBox>
<mx:Panel title="Source image">
<mx:HBox verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">
<mx:Image id="img1" source="assets/logo.png" />
</mx:HBox>
<mx:ControlBar>
<mx:Button label="Copy image" click="dupeImage(img1)" />
</mx:ControlBar>
</mx:Panel>
<mx:TileList id="tileList" dataProvider="{arrColl}" width="300" height="200" columnCount="4" verticalScrollPolicy="on">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:Image source="{data.image}" />
<mx:Label text="{data.label}" />
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
</mx:HBox>
</mx:Application>