关于Flex中的图片透明遮罩（仍有一疑问望高手解答）

本以为使用Flex中的遮罩很简单，理所当然的写下如下代码：

<mx:Image source="assets/bg.jpg" mask="{ maskImage }" />
<mx:Image source="assets/wjx.png" id="maskImage" />

结果：失败。背景图会显示遮罩层的大小，但是透明遮罩效果没有达到。

 

 

然后从Google中得知在做这种透明遮罩的时候，遮罩层的cacheAsBitmap必须设为true，否则无效。

<mx:Image source="assets/bg.jpg" mask="{ maskImage }" />
<mx:Image source="assets/wjx.png" id="maskImage" cacheAsBitmap="true" />

结果：失败。效果同上 

 

 

继续Google寻找结果，找到一个例子，跟着例子修改代码如下。

<mx:Image source="assets/bg.jpg" mask="{ maskImage }">
    <mx:filters>
        <mx:DropShadowFilter />
    </mx:filters>
</mx:Image>
<mx:Image source="assets/wjx.png" id="maskImage" cacheAsBitmap="true" />

结果：成功。 

 

 

虽然效果已经达到，但是仍然有一个疑问，为何要给背景图片加上滤镜，才能实现透明遮罩。
希望有高手能解答。

以下说明了何时会用的cacheAsBitmap的情况，感谢作者的经验分享：
内容来自：http://as3blog.com/as3/when-and-how-to-use-cacheasbitmap/

根据官方的说明，结合我自己的经验，分享一下：
该用cacheAsBitmap的时候：

   1. 在一个复杂的矢量化背景图片上存在大量动画；
   2. 滚动文本区域；
   3. 基于窗口的应用（你经常会拖拽整块区域）
   4. 透明遮罩（必须强制使用，否则失效）

不应该用cacheAsBitmap的时候：

   1. 不要滥用，cacheAsBitamp十分消耗内存，一块250×250像素的矩形进行cache之后可能占掉250kb的内存！
   2. 目标元素缩放的时候不要使用。
   3. 目标元素本身最好是静态的，或者不要经常发生翻转、缩放这样的动画
   4. 不要把矢量图和cache的位图一起混用。