缩略图的形式显示Flex的MXML组件 [英] Thumbnails for mxml components in Flex

问题描述

是否有可能做出某种其中我用在我的应用动态缩略图MXML组件？通过动态我的意思是，如果我改变了一些布局，MXML组件，我缩略图根据，没有任何的屏幕捕获新的布局刷新，经过PHOTOSHOP或类似=）

Is it possible to make some kind of 'dynamic' thumbnails for mxml components which I'm using in my application? By 'dynamic' I mean if I change some layout in mxml component, my thumbnail refreshes according to new layout without any screen capturing, photoshoping or similar =)

编辑：的
我使用的是 FlexBook 组件，这使得MXML组件的书（因为每一页都有许多独立的相互作用）。我认为这个问题可能是位图数据不存在，直到我真正开始翻页。不过，我想获得在创建完整的位图数据。

I am using a FlexBook component, which makes a 'book' of mxml components (because each page has many independent interactions). I think that problem could be that bitmap data does not exist until I actually start to turn pages. But I would like to get bitmap data on creation complete.

谢谢！

好吧，让我来尝试解释多一点，因为我认为这是比我想象它会更加复杂。

Ok, let me try to explain little more because I see this is more complicated than I thought it will be..

我使用的是 FlexBook 组件，这使得MXML的书成分（因为每个页面有许多独立的相互作用）。我认为这个问题可能是位图数据不存在，直到我真正开始翻页。不过，我想获得在创建位图数据完整...

I am using a FlexBook component, which makes a 'book' of mxml components (because each page has many independent interactions). I think that problem could be that bitmap data does not exist until I actually start to turn pages. But I would like to get bitmap data on creation complete...

感谢您的帮助！
米

Thanks for help!
m.

推荐答案

下面是一个函数I codeD很久以前的事。它需要一个的DisplayObject （MXML组件是的DisplayObject 太），它会返回一个位图。

Here is a function I coded long time ago. It takes a DisplayObject(mxml components are DisplayObject too), it will return a Bitmap of it.

您可以编写一个处理程序监听 Event.RENDER 的MXML组件更新位图当分量改变

You may write a handler to listen for Event.RENDER of the mxml component to update the Bitmap when the component is changed.

另一件你可以尝试FlexBook组件是设置 = creationPolicy的所有 ...

Another thing you can try on the FlexBook component is to set creationPolicy="all"...

/**
 * This function returns a Bitmap that have the same look of a given DisplayObject.
 * Ref.: http://qops.blogspot.com/2008/05/bitmap.html
 * @author Andy Li [e-mail]
 * @version 20080529
 */
package net.onthewings{
    import flash.geom.Point;
    import flash.geom.Rectangle;
    import flash.geom.Matrix;
    import flash.display.DisplayObject;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.PixelSnapping;
    import flash.display.Stage;

    public function bitmapEquivalentOf(obj:DisplayObject, extendsRectSidesBy:Number = 0, clipOutside = null,alpha:Boolean = true):Bitmap {
    	if (obj.width && obj.height) {
    		var bitmapData:BitmapData = new BitmapData(obj.width, obj.height, alpha, 0xFFFFFF);
    		var rect:Rectangle = obj.getBounds(obj);
    		var matrix:Matrix = new Matrix;
    		matrix.translate(-rect.x, -rect.y);
    		bitmapData.draw(obj, matrix);
    		var bitmap:Bitmap = new Bitmap(bitmapData, PixelSnapping.AUTO, true);
    		bitmap.x = rect.x;
    		bitmap.y = rect.y;
    		var ebd:BitmapData;

    		if (clipOutside) {
    			var h:Number;
    			var w:Number;
    			if (clipOutside is Stage) {
    				h = clipOutside.stageHeight;
    				w = clipOutside.stageWidth;
    			} else {
    				h = clipOutside.height;
    				w = clipOutside.width;
    			}
    			if(!(h && w)){
    				return null;
    			}
    			var pt:Point = obj.localToGlobal(new Point(rect.x,rect.y));
    			ebd = new BitmapData(w, h, true, 0xFFFFFF);
    			ebd.copyPixels(bitmap.bitmapData,new Rectangle(-pt.x,-pt.y,w,h),new Point(0,0));
    			bitmap =  new Bitmap(ebd, PixelSnapping.AUTO, true);
    		} else if (extendsRectSidesBy) {
    			ebd = new BitmapData(bitmapData.width+extendsRectSidesBy*2, bitmapData.height+extendsRectSidesBy*2, true, 0xFFFFFF);
    			ebd.copyPixels(bitmap.bitmapData,bitmap.bitmapData.rect,new Point(extendsRectSidesBy,extendsRectSidesBy));
    			bitmap =  new Bitmap(ebd, PixelSnapping.AUTO, true);
    			bitmap.x = rect.x - extendsRectSidesBy;
    			bitmap.y = rect.y - extendsRectSidesBy;
    		}
    		return bitmap;
    	} else {
    		return null;
    	}
    }
}

这篇关于缩略图的形式显示Flex的MXML组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！