as3的InteractivePNG例子

在as3中很多时候需要只能选中png中可视区域,即透明区域“感觉可以穿透”。两张png重叠的时候,鼠标可以分别响应它们的事件。如下图所示:

在网上搜索的时候,看到有人没用其它额外的类,自己写了一个例子。地址在这里:http://www.shch8.com/blog/post/71.html 有demo可以下载(例子需要使用flash cs4+才能打开)

比较巧妙的是这一段核心代码:

var bitmapData:BitmapData=new BitmapData(png_mc.width,png_mc.height,true,0x000000);   
    bitmapData.draw(png_mc);   
 
   //重绘图象到bitmapData    
   //png_mc.graphics.beginFill(0,1);   
   png_mc.graphics.beginBitmapFill(bitmapData);   
      
   var _width:Number = bitmapData.width;   
   var _height:Number = bitmapData.height;   
   for (var i:uint=0; i<_width; i++)    
   {   
       for (var j:uint=0; j<_height; j++)    
       {   
           if (bitmapData.getPixel32(i,j))    
           {   
               png_mc.graphics.drawRect(i,j,1,1);   
           }   
       }   
   }   
      
   png_mc.graphics.endFill();   
   png_mc.removeChildAt(0);   

可以看出它是对图片使用循环,取它的每一个像素然后进行判断(我觉得对于大的图片效率可能存在问题---猜测~)

而国外很早以前就有现成的类了“InteractivePNG”,文档在这里:http://www.mosessupposes.com/utilities/InteractivePNG.html  示例和类的下载地址:http://www.mosessupposes.com/utilities/

自己用flex简单的写了一个demo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                layout="absolute" 
                minWidth="955" minHeight="600" 
                creationComplete="loaded()" 
                horizontalScrollPolicy="off" verticalScrollPolicy="off">
    
    <mx:Script>
        <![CDATA[
            import com.mosesSupposes.bitmap.InteractivePNG;
            import mx.core.UIComponent;
            
            
            private var inter_val:Number = 100;
            
            private function loaded():void {
                loadBtn.addEventListener(MouseEvent.CLICK, loadImagesHandler);
            }
            
            private function loadImagesHandler(evt:MouseEvent=null):void {
                loadBtn.enabled = false;
                
                var ui:UIComponent = new UIComponent();
                ui.mouseEnabled = false;
                ui.mouseChildren = true; 
                ui.width = 322;
                ui.height = 455;
                photoContainer.addChild(ui);
                
                var mc:MovieClip = new MovieClip();
                mc.graphics.beginFill(0x000000, 0.0);
                mc.graphics.drawRect(0,0, ui.width, ui.height);
                mc.graphics.endFill();
                ui.addChild(mc);
                
                addImage(mc, img_1);
                addImage(mc, img_2);
                addImage(mc, img_3);
                addImage(mc, img_4);
            }
            
            private function addImage(mc:MovieClip, imgObj:UIComponent):void {
                
                var img:InteractivePNG;
                img = new InteractivePNG();
                mc.addChild(img);
                img.x = inter_val;
                inter_val += 120;
                
                var bitmapData:BitmapData = new BitmapData(mc.width, mc.height, true, 0);
                    bitmapData.draw(imgObj);
                var bt:Bitmap = new Bitmap(bitmapData);
                
                img.addChild(bt);
                
                img.addEventListener(MouseEvent.ROLL_OVER, addFilterHandler);
                img.addEventListener(MouseEvent.ROLL_OUT, clearFilterHandler);
            }
            
            private function getBitmapFilter():GlowFilter {
                var color:Number = 0xffffff;;
                var alpha:Number = 1;
                var blurX:Number = 5;
                var blurY:Number = 5;
                var strength:Number = 4;
                var inner:Boolean = false;
                var knockout:Boolean = false;
                var quality:Number = BitmapFilterQuality.LOW;
                
                return new GlowFilter(color, alpha, blurX, blurY, strength, quality, inner, knockout);
            }
            
            private function clearFilterHandler(evt:MouseEvent):void {
                var mc:MovieClip = evt.currentTarget as MovieClip;
                
                if (mc) {
                    mc.filters = null;
                } 
            }
            
            private function addFilterHandler(evt:MouseEvent):void {
                var mc:MovieClip = evt.currentTarget as MovieClip;
                
                if (mc) {
                    var filters:Array = new Array();
                    filters = mc.filters;
                    filters.push(getBitmapFilter());
                    mc.filters = filters;
                }
            }
            
        ]]>
    </mx:Script>
    
    
    <mx:VBox width="100%" height="100%" 
             horizontalScrollPolicy="off" verticalScrollPolicy="off" 
             verticalGap="10" 
             verticalCenter="0" horizontalCenter="0" horizontalAlign="center" verticalAlign="middle"
             paddingLeft="100" paddingRight="100">
        
        <mx:HBox width="100%" horizontalAlign="left">
            <mx:Button label="加载图片" id="loadBtn" />
        </mx:HBox>
        
        <mx:HBox id="photoContainer" width="100%" horizontalGap="10" height="480" 
                 verticalAlign="middle" verticalCenter="0" horizontalAlign="left"
                 borderColor="#406c99" borderStyle="solid" borderThickness="1" 
                 horizontalScrollPolicy="off" 
                 verticalScrollPolicy="off" />
        
        <mx:Image source="assets/1.png" visible="false" includeInLayout="false" id="img_1" />
        <mx:Image source="assets/2.png" visible="false" includeInLayout="false" id="img_2"/>
        <mx:Image source="assets/3.png" visible="false" includeInLayout="false" id="img_3"/>
        <mx:Image source="assets/4.png" visible="false" includeInLayout="false" id="img_4"/>
        
    </mx:VBox>
    
</mx:Application>

完整的代码下载>>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ShaoYL

Git在Xcode中的配置与使用常见问题总结

429110
来自专栏守望轩

Visual Studio 2008 每日提示(二十三)

#221、在对象浏览器中按对象和成员排序 原文链接:You can sort objects and members in the Object Browse...

38960
来自专栏前端布道

全方位理解JavaScript的Event Loop

下面我们一个一个的来了解 Event Loop 相关的知识点,最后再一步一步分析出本段代码最后的输出顺序。

11330
来自专栏偏前端工程师的驿站

CMD魔法堂:支持显示UTF8编码的中文

一、前言                                     在Unbuntu中用sqlite3-command-line操作sqlite3...

222100
来自专栏用户2442861的专栏

ubuntu gcc编译时对’xxxx’未定义的引用问题

http://www.cnblogs.com/oloroso/p/4688426.html

47820
来自专栏IMWeb前端团队

Qjs直出实现过程

直出要做什么 在服务端为Qjs填充默认的值,例如 输入: <div q-text="name"></div> {"name": "Qjs"} 直出: <div ...

21880
来自专栏SeanCheney的专栏

ViEmu的vi-vim编辑器教程

http://www.viemu.com/a_vi_vim_graphical_cheat_sheet_tutorial.html

40080
来自专栏idba

Python模块之subprocess

一 简介 在使用Python 开发MySQL自动化相关的运维工具的时候,遇到一些有意思的问题,本文介绍Python的 subprocess 模块以及如何和My...

15710
来自专栏知晓程序

开发 | 小程序开发有哪些坑?这份笔记都整理出来了

21730
来自专栏V站

六个有用的 PHP 片段或技巧

网上有很多 PHP 代码片段可以提高开发效率,也可以学习一下其中的技巧而应用在自己的项目中,下面就精选了几个比较有用的 PHP 片段。

22520

扫码关注云+社区

领取腾讯云代金券