`

利用blendMode实现 Alpaha 通道遮罩

    博客分类:
  • AS3
阅读更多

做项目遇到flash player的bug真的是很头疼,

 

    当本身或父容器的cacheAsBitmap   = true 时,就会对,该对象 的matrix 产生扰乱,就是取值设置不准确,这是    flash 的bug   http://bugs.adobe.com/jira/browse/FP-121

 

什么东西呢,就是

       

        A:   mask.png                   B:   frame.png                               C:    Image.*

       
                   

 

 

 几张图要实现这样的效果



 

 

自然就想到了用 flash的遮罩来实现。哦对了,其中mask.png还要做下补色,然后对frame.png和Image.*组成的图

进行apha遮罩,但是这样做会有个问题因为,对Image.*的操作是基于 matrix的,而alpha遮罩是要设置cacheAsBitmap = true 的,但是这样做会有我一开始提到的那个问题,虽然http://www.sephiroth.it/weblog /a ... heasbitmap_hell.php 上面给出了解决办法,但是我发现还是没有根本解决问题。怎么办勒,终于被我发现另外一种实现alpha通道遮罩的办法,而不用设置cacheAsBitmap=true,那就是用blendMode。将父层的blend设置为

BlendMode.LAYER,在将mask层放在被遮罩层上并设置blend = BlendMode.ALPHA,嘿嘿,一切都解决啦。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

package {
    import flash.display.BlendMode;
    import flash.events.MouseEvent;
    
    import mx.containers.Canvas;
    import mx.controls.Image;
    import mx.core.ScrollPolicy;
    import mx.core.mx_internal;
    use namespace mx_internal;
    
    public class BlendTestContainer extends Canvas {
        
        [Embed(source="testPicture.jpg")]
        private var testPictureClass:Class;
        
        [Embed(source="frameImage.png")]
        private var frameImageClass:Class;
        
        [Embed(source="maskImage.png")]
        private var maskImageClass:Class;
        
        public function BlendTestContainer() {
            _horizontalScrollPolicy = ScrollPolicy.OFF;
            _verticalScrollPolicy = ScrollPolicy.OFF;
            
            blendMode = BlendMode.LAYER;
        }
        
        private var testPicture:Image;
        private var frameImage:Image;
        private var maskImage:Image;
        
        override protected function createChildren():void {
            super.createChildren();
            
            if(!testPicture) {
                testPicture = new Image();
                testPicture.addEventListener(MouseEvent.MOUSE_DOWN,testPictureMouseDownHandler);
                testPicture.source = testPictureClass;
                addChild(testPicture);
            }
            
            if(!frameImage) {
                frameImage = new Image();
                frameImage.mouseEnabled = false;
                frameImage.mouseChildren = false;
                frameImage.maintainAspectRatio = false;
                frameImage.source = frameImageClass;
                addChild(frameImage);
            }
            
            if(!maskImage) {
                maskImage = new Image();
                maskImage.mouseEnabled = false;
                maskImage.mouseChildren = false;
                maskImage.maintainAspectRatio = false;
                maskImage.source = maskImageClass;
                maskImage.blendMode = BlendMode.ERASE;
                addChild(maskImage);
            }
        }
        
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth,unscaledHeight);
            
            frameImage.setActualSize(unscaledWidth,unscaledHeight);
            maskImage.setActualSize(unscaledWidth,unscaledHeight);
        }
        
        private function testPictureMouseDownHandler(e:MouseEvent):void {
            testPicture.startDrag();
            this.stage.addEventListener(MouseEvent.MOUSE_UP,stageMouseUpHandler);
        }
        
        private function stageMouseUpHandler(e:MouseEvent):void {
            testPicture.stopDrag();
            this.stage.removeEventListener(MouseEvent.MOUSE_UP,stageMouseUpHandler);
        }
    }
}
 

 

 

 

 

  • 大小: 28.2 KB
  • 大小: 55.2 KB
  • 大小: 279.9 KB
  • 大小: 70.9 KB
分享到:
评论
2 楼 qiyangyang09 2011-02-28  
兄台,能不能贴出源码让大家分享一下啊。非常感谢,我急切想解决这个问题。谢谢了。qiyy@winnerinf.com
1 楼 qiyangyang09 2011-02-28  
兄台,能不能贴出源码让大家分享一下啊。非常感谢,我急切想解决这个问题。谢谢了。qiyy@winnerinf.com

相关推荐

    as3实现图片lomo效果

    在 AS3 中,可以使用 `BlendMode.INVERT` 或者通过 `BitmapData.colorTransform` 方法来实现。 ```actionscript private function processInvert():void { bitmapdata.colorTransform(new Rectangle(0, 0, ...

    C# wpf 实现底部嵌入HwndHost

    对于wpf实现会复杂一些,因为提供自绘没有BlendMode之类的东西,无法直接消除底部画面,能够使用的方式是Clip,这种方式限制比较多。不过最终还是实现了功能。本资源为文章附件资源,原文链接:...

    [opencv]005 简单图像混合

    在实现图像混合时,我们通常会用到OpenCV中的基本图像操作函数,如`cv::imread`用于读取图像,`cv::imshow`用于显示图像,以及`cv::imwrite`用于保存结果。关键在于理解如何操作图像的像素值。OpenCV中的`cv::Mat`类...

    采用Bitmap的extractAlpha产生图片边缘光晕效果

    本文将深入探讨如何利用Bitmap的extractAlpha方法来实现图片边缘光晕效果。提取Alpha通道是图像处理中的一个重要概念,它涉及到图像透明度的处理。在Android中,Alpha通道通常用于表示图像的透明度或不透明度,值越...

    FLASH文件播放,实现FLASH的透明处理.

    例如,使用`BlendMode.LAYER`可以使一个对象与其下方的对象合并,而使用遮罩可以隐藏对象的一部分,从而创建出动态的透明效果。 总的来说,Flash文件播放和透明处理是Web开发历史上的一个重要章节。虽然现在我们更...

    blendmode-filter-video:为我在CSS Paris Meetup上的演讲而创建的小型应用程序(http

    在CSS巴黎聚会上,一位演讲者展示了一个名为“blendmode-filter-video”的小型应用程序,它利用了CSS3中的滤镜和混合模式特性来增强视频内容的表现力。这个应用是为了演示如何在网页设计中创造性地使用这些技术,以...

    Java实现多种幻灯片切换特效.doc

    ### Java 实现多种幻灯片切换特效的知识点详解 #### 一、背景介绍 随着多媒体技术的发展,幻灯片在教育、会议、演示等多个领域的应用越来越广泛。为了增强视觉效果和用户交互体验,幻灯片之间的过渡动画成为了一个...

    ios-CALayer.zip

    CALayer提供了混合模式(blendMode)属性,可以实现各种视觉效果,如颜色混合、透明度变化等。同时,通过设置`mask`属性,可以创建基于形状或图像的遮罩,实现部分透明或形状裁剪的效果。 十、响应式布局 虽然...

    UIImage-MARKColorizer:用于图像着色的 UIImage 类别

    演示可用方法+ (UIImage *)mark_colorizeImage:(UIImage *)image withColor:(UIColor *)color blendMode:( CGBlendMode )blendMode;- (UIImage *)mark_colorizedCopyWithColor:(UIColor *)color blendMode:(

    SDL2.0 扣色(PNG图片重叠)

    在计算机图形学中,图像处理是一项重要的任务,而PNG图片的重叠与扣色操作是其中常见的应用场景。...掌握这些知识点后,你将能够利用SDL2.0库实现PNG图片的重叠和透明效果,为游戏或其他图形应用增添丰富的视觉效果。

    flex图片水纹效果

    例如,使用`blendMode = BlendMode.LAYER`或`BlendMode.MULTIPLY`可以使水纹与背景图片更好地融合。 6. **透明度变化**:通过调整水纹的透明度(`alpha`属性),可以增加或减少其可见度,从而模拟波纹扩散或消散的...

    Having-fun-with-p5js-s-blendMode-:快速的p5.js草图测试blendMode函数,并使用CCapture生成草图的gif!

    快速的p5.js草图测试blendMode函数,并使用CCapture生成草图的gif! 为了制作gif,您需要将'recording'变量设置为true,并且可以使用index.html中的'gifLength'变量(在sketch.js中)设置gif中的帧数。的gif。

    150928_css3_blendmode:这是文章“以CSS3 mix-blend-mode实现的绘图表达”的示例。

    通过CSS3的mix-blend-mode实现的图形表达演示网址拖动鼠标进行操作。屏幕上绘制了一张彩色的图。评论文章有关详细信息,请参见用ICS LAB编写的文章。 它是使用CSS3的mix-blend-mode属性创建的。使用的图书馆 2015.05...

    Android源码——常用图片特效处理源码.zip

    5. **颜色调整**:除了ColorMatrix,还可以使用 PorterDuffColorFilter 和 BlendMode 来实现颜色混合和叠加效果,创造出独特的视觉风格。 6. **动画效果**:Android的Animation框架允许开发者为图片添加过渡动画,...

    flutter 怎么实现app整体灰色效果

    总的来说,通过巧妙地利用 Flutter 的 `ShaderMask` 和 `Gradient`,我们可以轻松地为整个应用程序添加全局的灰色效果。这种方法不仅适用于表达特定的情感,还可以作为设计上的临时调整,如在更新界面色彩方案时使用...

    用GPUImage来给视频加入水印

    GPUImage是一个强大的图像处理框架,由Brad Larson开发,它利用设备的GPU进行高效的图像和视频处理,包括滤镜应用、水印添加等。本教程将深入探讨如何使用GPUImage来给视频添加水印,主要涉及以下知识点: 1. ...

    java多种幻灯片切换特效(经典)

    通过巧妙地使用`BlockingQueue`处理图片加载,自定义`Transition`实现特定动画效果,以及利用`BlendMode`和`Transition`组合特效,可以实现如淡入淡出、缓慢覆盖、旋转覆盖等多种幻灯片变换效果。这些技术不仅适用于...

    Flutter 实现整个App变为灰色的方法示例

    但在这里,`BlendMode.color`已经足够实现将颜色转为灰色的需求。 总的来说,Flutter提供了一个简单且灵活的方式来改变应用的视觉风格,通过`ColorFiltered`组件我们可以轻松实现App变灰或者其他颜色调整。在实际...

    VES教程之水的制作

    - **启用混合模式**:在水面材质节点属性参数中启用“BlendMode”,以实现透明效果。 - **设置贴图通道**:通过“窗口”菜单打开“材质编辑”窗口,设置贴图通道1为之前制作的深度贴图,并确保Wrap S和Wrap T为True...

    pb6.5透明效果感觉效果还不错

    上述代码中,颜色值0x80FF0000代表红色,其中前两位0x80是透明度(Alpha通道),后面的0xFF0000是RGB颜色值。通过调整这个透明度掩码,我们可以改变画刷的透明程度。 除了基本的透明度设置,还可以通过混合模式...

Global site tag (gtag.js) - Google Analytics