如何在Flex中使用位图图像创建反射效果？

I'm looking for a simple, clean and memory-efficient way to create and apply a reflection effect (you know the one, popularized by the famed iPhone UI) to the bitmap images I've loaded into a Flex app at runtime. The source images will be of varying types (JPGs, PNGs, etc.), but an acceptable solution can assume each image is already loaded and being stored as BitmapData.

我正在寻找一种简单,干净且内存有效的方法来创建和应用反射效果(您知道由着名的iPhone UI推广的那个)到我在运行时加载到Flex应用程序中的位图图像。源图像将具有不同类型(JPG,PNG等),但是可接受的解决方案可以假设每个图像已经加载并存储为BitmapData。

What I'd like to be able to do is apply, optionally, a reflection effect to some views of the BitmapData, but still keep the source BitmapData intact, since not all views of it will require the reflection effect. Insights greatly appreciated! Thanks in advance.

我希望能够做的是,可选地,对BitmapData的某些视图应用反射效果,但仍保持源BitmapData完整,因为并非所有视图都需要反射效果。见解非常感谢!提前致谢。

4 个解决方案

#1

You can use this class:

你可以使用这个类:

http://code.google.com/p/cay/source/browse/trunk/as3/cl/cay/effects/Reflejo.as

It's probably not perfect, but at least will give you a quick start. Then update & modify to your needs if you fancy.

它可能并不完美,但至少会给你一个快速的开始。如果您喜欢,请更新并修改您的需求。

HTH

#2

Chet Haase posted the answer I was looking for, with accompanying source code and demo video. Hope it helps others looking for a flexible solution.

Chet Haase发布了我正在寻找的答案,附带源代码和演示视频。希望它能帮助其他人寻找灵活的解决方案。

#3

Possibly an easier way, but offhand I'd say just display a second copy of the image inverted and made transparent:

可能是一种更简单的方法,但随便我只是说显示倒置的图像的第二个副本并使其透明:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="onCC()">
    <mx:Script>
        <![CDATA[
            private function onCC():void {
                var m:Matrix = new Matrix(1,0,0,-1,flipImage.transform.matrix.tx, flipImage.transform.matrix.ty + flipImage.height);
                flipImage.transform.matrix = m;
                flipImage.alpha = 0.3;
            }
        ]]>
    </mx:Script>
    <mx:VBox verticalGap="0">
        <mx:Image source="http://*.com/Content/Img/*-logo-250.png">

        </mx:Image>
        <mx:Image id="flipImage" source="http://*.com/Content/Img/*-logo-250.png">

        </mx:Image>
    </mx:VBox>
</mx:Application>

#4

You can always use scaleX = -1;

你总是可以使用scaleX = -1;

this will flip your image horizontally. but it flips using the left side as axle, so you have to adjust the x position of the image to be image.x = image.x + image.widht;

这将水平翻转图像。但它使用左侧作为轴翻转,因此您必须将图像的x位置调整为image.x = image.x + image.widht;

#1