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
  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">
  6. <mx:Script>
  7. <![CDATA[
  8. import mx.collections.ArrayCollection;
  9. [Bindable]
  10. private var arrColl:ArrayCollection = new ArrayCollection();
  11. private function dupeImage(source:Image):void {
  12. var data:BitmapData = Bitmap(source.content).bitmapData;
  13. var bitmap:Bitmap = new Bitmap(data);
  14. arrColl.addItem({image:bitmap, label:"item #" + (arrColl.length + 1)});
  15. }
  16. ]]>
  17. </mx:Script>
  18. <mx:HBox>
  19. <mx:Panel title="Source image">
  20. <mx:HBox verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">
  21. <mx:Image id="img1" source="assets/logo.png" />
  22. </mx:HBox>
  23. <mx:ControlBar>
  24. <mx:Button label="Copy image" click="dupeImage(img1)" />
  25. </mx:ControlBar>
  26. </mx:Panel>
  27. <mx:TileList id="tileList" dataProvider="{arrColl}" width="300" height="200" columnCount="4" verticalScrollPolicy="on">
  28. <mx:itemRenderer>
  29. <mx:Component>
  30. <mx:VBox>
  31. <mx:Image source="{data.image}" />
  32. <mx:Label text="{data.label}" />
  33. </mx:VBox>
  34. </mx:Component>
  35. </mx:itemRenderer>
  36. </mx:TileList>
  37. </mx:HBox>
  38. </mx:Application>

转载:http://hi.baidu.com/knhpzqdqjrcenxr/item/3bc380b97bd27575254b092a

你可能感兴趣的:(Flex中如何利用Bitmap和BitmapData类复制图片到一个TileList控件的例子)