Flex缩略图功能

2011-03-22 9:31

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

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

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

 

Actionscript代码

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

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：

 

Actionscript代码

canvas.width = _maxX;     canvas.height = _maxY;  

canvas.width = _maxX; canvas.height = _maxY;

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

     3、计算缩略的比例：

 

Actionscript代码

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

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);  

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