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>

完整的代码下载>>