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

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

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

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

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3. layout="vertical"
4. verticalAlign="middle"
5. backgroundColor="white">
7. <mx:Script>
8. <![CDATA[
9. import mx.collections.ArrayCollection;
11. [Bindable]
12. private var arrColl:ArrayCollection = new ArrayCollection();
14. private function dupeImage(source:Image):void {
15. var data:BitmapData = Bitmap(source.content).bitmapData;
16. var bitmap:Bitmap = new Bitmap(data);
18. arrColl.addItem({image:bitmap,label:"item #" + (arrColl.length + 1)});
19. }
20. ]]>
21. </mx:Script>
23. <mx:HBox>
24. <mx:Panel title="Source image">
25. <mx:HBox verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">
26. <mx:Image id="img1" source="assets/logo.png" />
27. </mx:HBox>
29. <mx:ControlBar>
30. <mx:Button label="Copy image" click="dupeImage(img1)" />
31. </mx:ControlBar>
32. </mx:Panel>
34. <mx:TileList id="tileList" dataProvider="{arrColl}" width="300" height="200" columnCount="4" verticalScrollPolicy="on">
35. <mx:itemRenderer>
36. <mx:Component>
37. <mx:VBox>
38. <mx:Image source="{data.image}" />
39. <mx:Label text="{data.label}" />
40. </mx:VBox>
41. </mx:Component>
42. </mx:itemRenderer>
43. </mx:TileList>
44. </mx:HBox>
46. </mx:Application>