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>

完整的代码下载>>