Flex 中 mxml 组件的缩略图 [英] Thumbnails for mxml components in Flex

问题描述

是否可以为我在应用程序中使用的 mxml 组件制作某种动态"缩略图?动态"是指如果我更改 mxml 组件中的某些布局，我的缩略图会根据新布局刷新，无需任何屏幕捕获、photoshoping 或类似操作 =)

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.

推荐答案

这是我很久以前编写的一个函数.它需要一个 DisplayObject(mxml 组件也是 DisplayObject)，它将返回它的 Bitmap.

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.

您可以编写一个处理程序来监听 mxml 组件的 Event.RENDER，以便在组件更改时更新 Bitmap.

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="all"...

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屋！