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

By Minidxer | July 6, 2008

在前面的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.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.collections.ArrayCollection;
  10.  
  11.             [Bindable]
  12.             private var arrColl:ArrayCollection = new ArrayCollection();
  13.  
  14.             private function dupeImage(source:Image):void {
  15.                 var data:BitmapData = Bitmap(source.content).bitmapData;
  16.                 var bitmap:Bitmap = new Bitmap(data);
  17.  
  18.                 arrColl.addItem({image:bitmap, label:"item #" + (arrColl.length + 1)});
  19.             }
  20.         ]]>
  21.     </mx:Script>
  22.  
  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>
  28.  
  29.             <mx:ControlBar>
  30.                 <mx:Button label="Copy image" click="dupeImage(img1)" />
  31.             </mx:ControlBar>
  32.         </mx:Panel>
  33.  
  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>
  45.  
  46. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | 3 Comments » | 836 views Tags: , , , , ,

你可能还对下列文章感兴趣:

3 comments | Add One

  1. opera - 07/7/2008 at 3:27 pm

    学习一下。。。

  2. bin - 10/15/2009 at 9:48 pm

    这个例子生成的多生成几次图片，当TileList有滚动条出现时，拖动一下滚动条，图片就都不见了~~怎么解决~~

  3. jiahuafu - 02/23/2010 at 2:02 pm

    这个例子生成的多生成几次图片，当TileList有滚动条出现时，拖动一下滚动条，图片就都不见了~~怎么解决~~

    同样的问题，是什么原因呢？

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll