前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >as3的InteractivePNG例子

as3的InteractivePNG例子

作者头像
meteoric
发布2018-11-15 17:54:23
5190
发布2018-11-15 17:54:23
举报
文章被收录于专栏:游戏杂谈游戏杂谈

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

image
image

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

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

代码语言:javascript
复制
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:

代码语言:javascript
复制
<?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>

完整的代码下载>>

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2011-06-17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档