Flex 缩略图的实现

      最近一直在弄Flex，其中有一个功能就是缩略图，缩略图的场景是：有一个Canvas的容器，这个容器中有很多的显示对象，实现该容器的一个缩略图。(注意：该Canvas容器只显示了一部分，其他部分需要移动滚动条才能看到)

      方法一(借助ImageSnapshot.captureBitmapData方法)：

      1、计算出Canvas中所有显示对象右下角的最大X坐标和最大的Y坐标(_maxX,_maxY)：

 

var point:Point = caculateMaxPoint(canvas);//canvas为需要缩略的Canvas容器。caculateMaxPoint方法计算该容器中显示对象的X，Y最大的点。

var _maxX:Number = point.x ;

var _maxY:Number = point.y ;

 

      2、将Canvas的width和height分别设置为_maxX和_maxY：

 

canvas.width = _maxX;

canvas.height = _maxY;

         注意： 这一步非常重要，如果没有这个设置，那么使用ImageSnapShot.caputreBitmapData方法获取到的只是Canvas容器当前显示的部分，而不能获取到所有的显示对象。

     3、计算缩略的比例：

 

var matrix : Matrix = new Matrix();

matrix.scale(width/_maxX , height / _maxY);//其中width和height是缩略图所存放容器的宽度和高度。

      4、获取Canvas容器的BitmapData数据：

 

var bitmapData:BitmapData = ImageSnapShot.captureBitmapData(canvas , matrix);

var bitMap:BitMap = new BitMap(bitmapData);

      5、将4步骤中生成的bitMap作为缩略图容器的中<mx:Image>的source。这样Canvas容器的缩略图就出来了。

      6、最后将Canvas容器的width和height恢复为初始的宽度和高度。

      7、当然还有缩略图和原图之间的联动，我是通过缩略图的坐标按照缩放的比例找出原图的坐标，并定位滚动条的位置，这里就不描述了。

      我使用这个方法时遇到的一个问题：使用ImageSnapShot.captureBitmapData(canvas , matrix)时，会对原图缩小然后拍下快照，再将原图恢复。这个过程一般情况下客户是看不到的，但是如果频繁调用这个方法，会导致如果原图出现缩小，然后恢复的过程，这样就影响到原图的效果，目前没有找到解决方法。

      方法二(只是思路)：使用COPY 的方法，在Canvas 容器中添加一个属性thumbNailCanvas，它是Canvas 容器的一个复制，任何对Canvas容器的改变，同时也改变thumbNailCanvas。

评论

5 楼 670106641 2013-05-22  

我也想要个源码

4 楼 liang1000liang 2012-06-28  

顶???????????????????

3 楼 liang1000liang 2012-06-28  

很好，有原码吗

2 楼 melin 2010-09-06  

您好，能不能做到下面这样的效果，在缩略图中指定一个区域，能指定到被缩略区域的特定位置。

1 楼 melin 2010-09-06  

您好，能不能做到下面这样的效果，在缩略图中指定一个区域，能指定到被缩略区域的特定位置。
http://melin.iteye.com/upload/picture/pic/70996/4b452b2b-8cfa-333e-af8c-9812b3f7e280.png