本以为使用Flex中的遮罩很简单,理所当然的写下如下代码:
<
mx:Image
source
="assets/bg.jpg"
mask
="{ maskImage }"
/>
< mx:Image source ="assets/wjx.png" id ="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" />
< 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" />
< 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的位图一起混用。
该用cacheAsBitmap的时候:
1. 在一个复杂的矢量化背景图片上存在大量动画;
2. 滚动文本区域;
3. 基于窗口的应用(你经常会拖拽整块区域)
4. 透明遮罩(必须强制使用,否则失效)
不应该用cacheAsBitmap的时候:
1. 不要滥用,cacheAsBitamp十分消耗内存,一块250×250像素的矩形进行cache之后可能占掉250kb的内存!
2. 目标元素缩放的时候不要使用。
3. 目标元素本身最好是静态的,或者不要经常发生翻转、缩放这样的动画
4. 不要把矢量图和cache的位图一起混用。