1、镂空遮罩这几天写游戏的新手引导模块，需要做一个镂空遮罩，就是盖着整个场景，只让用户点击镂空的一个圆形区域。这个事看起来很简单。其实就是很简单啊！可是因为我把问题想得太复杂了，浪费了好多时间，特此文章一篇。也希望遇到同样问题的人，不再跳进这个坑。先是上网搜索了，发现都是用混合模式的方法：1.先创建一个 Sprite 画一个矩形盖着整个场景，blendMode 设置为 Layer，2. 再创建一个 Sprite 画一个小圆，blendMode 设置为Erase。3.将小圆添加到矩形里。 OK，镂空图案出来了。中间一个圆确实是透明的，可是测试的时候发现，这个方法根本是个坑。因为即使中间的圆形区域看起
2、来是透明的，却还是可以点击的！根本没有穿透。整个场景被盖得严严实实的。然后又继续上网搜索，看了几篇坑更深的博文，“详细分析”了镂空遮罩这个东西在Flash Player 似乎是不可实现的，并且不记得在哪看见了“模拟鼠标事件”的字眼。好吧，既然这样。那我就模拟鼠标点击事件吧。继续用混合模式的方法，制作一个全部盖着的遮罩。然后监听，中间那个圆形的鼠标事件获取点击位置,再然后克隆下这个事件想办法从遮罩后面的某个显示对象上抛出去。那要怎么确定从哪个对象上抛事件呢？我查了下 API，发现 DisplayObject 有个不太常用的函数：getObjectsUnderPoint()。测试了下，发现它能拿到
3、指定坐标下的所有显示对象列表，并且从外向内，从低层到顶层地排序。也就列表是最后一个元素是该坐标下最顶部的最小的一个显示对象。嗯，感觉有点靠谱了。我就直接用最后一个显示对象抛出克隆的鼠标事件。放到工程里测试了下，发现果然可以。但是，只是部分可以，有的地方怎么点都没反应。我又断点调试看了下。原来那个方法返回的只是显示对象列表，但并不是所有显示对象都能冒泡鼠标事件的。能冒泡鼠标事件的对象必须是 InteractiveObject 的子类。而 InteractiveObject是 DisplayObject 的子类。问题就出在这。DisplayObject 的子类里有个 Shape，它不是Intera
4、ctive 的子类。所以在它上面抛出鼠标事件，一点反应都没有。好吧，那我再判断下，如果它不是 InteractiveObject，就用它的父级抛出鼠标事件。嗯，感觉又靠谱了。测试了下，怎么还是不行啊？再断点调试，发现列表最顶端的元素，它的父级的父级的父级，mouseChildren 和 mouseEnabled 都是 false，也就是说，这个元素，它本应该是被穿过的，它下一层的元素才有可能是可以抛出鼠标事件的对象。这下纠结了啊，下一个元素有可能是它的父级，有可能是它同级的，也有可能是同级的子项。并且不是它自身的 mouseEnabled 为 true 就算了。每一层的父级，若有一个mouse
5、Children 为 false，则子项的 mouseEnabled 全都相当于 false。即使自身的mouseEnabled 为 false，它也有可能作为父级的点击区域而存在。这坑已经越来越深了。我纠结了一下午，都在理这其中的判定顺序。就在我即将突破的时候。同事来凑热闹了，了解了情况后说:果然纠结啊，我也想试试。然后他就回去用 Flash pro 画了一个mc 出来，杯具就这样发生了。他回去只写了几行测试代码。叫我过去看，结果居然就搞定了。原来用绘图函数，直接drawRect()，再 drawEllipse(),第一个 Rect 就会被第二个 Ellipse 抠出个镂空区域来，画出来的镂
6、空区域就是可以穿过点击的。没错，就是这么简单。下面上代码：?12345678910111213141516171819202122packageimport flash.display.Sprite;import flash.events.MouseEvent;/* 镂空遮罩测试* author DOM*/public class HollowTest extends Spritepublic function HollowTest()super();var bg:Sprite = new Sprite;bg.graphics.beginFill(0x009aff);bg.graphics.d
7、rawRect(0,0,500,400);bg.graphics.endFill();bg.addEventListener(MouseEvent.CLICK,onBgClick);addChild(bg);var hollowMask:Sprite = new Sprite;hollowMask.graphics.beginFill(0x009900);hollowMask.graphics.drawRect(150,100,200,200);2324252627282930313233343536373839404142hollowMask.graphics.drawEllipse(200
8、,150,100,100);hollowMask.graphics.endFill();hollowMask.addEventListener(MouseEvent.CLICK,onMaskClick);addChild(hollowMask);private function onMaskClick(event:MouseEvent):voidtrace(“maskClick!“);private function onBgClick(event:MouseEvent):voidtrace(“bgClick!“);后来整理了下，封装了个镂空遮罩组件出来，可以直接设置它的宽高和镂空位置，它会自
9、动重绘。还是上代码吧：?12345678910111213141516package module.newGuide.viewimport flash.display.Sprite;import flash.events.Event;/* 镂空遮罩工具类* author DOM*/public class HollowMask extends Sprite/* 构造函数* param width 镂空圆形的宽度* param height 镂空圆形的高度*/ public function 17181920212223242526272829303132333435363738HollowMa
10、sk(hollowWidth:Number=100,hollowHeight:Number=100)super();this._hollowWidth = hollowWidth;this._hollowHeight = hollowHeight;this.redrawRequest = true;private var _maskColor:uint = 0x000000;/* 遮罩的颜色*/ public function get maskColor():uintreturn _maskColor;public function set maskColor(value:uint):void
11、if(_maskColor=value)return;_maskColor = value;redrawRequest = true;39404142434445464748495051525354555657585960private var _maskAlpha:Number = 0.5;/* 遮罩的透明度*/public function get maskAlpha():Numberreturn _maskAlpha;public function set maskAlpha(value:Number):voidif(_maskAlpha=value)return;_maskAlpha
12、= value;redrawRequest = true;/* 移动镂空区域到指定的坐标* param x 目标点 x 坐标* param y 目标点 y 坐标* param speed 移动速度，单位为像素,若小于等于 0，则不执行缓动。*/ public function moveHollowTo(x:Number,y:Number,speed:Number = 0):void61626364656667686970717273747576777879808182moveSpeed = speed;if(speed=0)removeMoveEventListener();_hollowX
13、= x;_hollowY = y;drawBackground();elsetargetX = x;targetY = y;addMoveEventListener();/* 缓动事件监听已添加标志 */ private var moveEventAttached:Boolean = false;/* 添加缓动事件监听8384858687888990919293949596979899100101102103104*/ private function addMoveEventListener():voidif(moveEventAttached)return;moveEventAttache
14、d = true;this.addEventListener(Event.ENTER_FRAME,onMoveHollow);/* 移除缓动事件监听*/ private function removeMoveEventListener():voidif(!moveEventAttached)return;moveEventAttached = false;removeEventListener(Event.ENTER_FRAME,onMoveHollow);/* 移动速度,像素 */ private var moveSpeed:Number = 0;1051061071081091101111
15、12113114115116117118119120121122123124125126/* 目标点 x 坐标 */ private var targetX:Number = 0;/* 目标点 y 坐标 */ private var targetY:Number = 0;/* 缓动处理函数*/ private function onMoveHollow(event:Event):voidvar offsetX:Number = targetX - _hollowX;var offsetY:Number = targetY - _hollowY;var distance:Number = Mat
16、h.sqrt(offsetX*offsetX+offsetY*offsetY);if(distance=0|distance=moveSpeed)_hollowX = targetX;_hollowY = targetY;removeMoveEventListener();127128129130131132133134135136137138139140141142143144145146147148else_hollowX += offsetX*moveSpeed/distance;_hollowY += offsetY*moveSpeed/distance;drawBackground(
17、);private var _hollowX:Number = 0;/* 镂空区域的 x 坐标位置*/ public function get hollowX():Numberreturn _hollowX;public function set hollowX(value:Number):voidif(_hollowX = value)return;_hollowX = value;redrawRequest = true;149150151152153154155156157158159160161162163164165166167168169170private var _hollow
18、Y:Number = 0;/* 镂空区域的 y 坐标位置*/public function get hollowY():Numberreturn _hollowY;public function set hollowY(value:Number):voidif(_hollowY = value)return;_hollowY = value;redrawRequest = true;private var _hollowWidth:Number = 100;/* 镂空圆形区域宽度*/public function get hollowWidth():Numberreturn _hollowWi
19、dth;171172173174175176177178179180181182183184185186187188public function set hollowWidth(value:Number):voidif(_hollowWidth=value)return;_hollowWidth = value;redrawRequest = true;private var _hollowHeight:Number = 100;/* 镂空圆形区域高度*/public function get hollowHeight():Numberreturn _hollowHeight;public
20、function set hollowHeight(value:Number):voidif(_hollowHeight=value)return;_hollowHeight = value;redrawRequest = true;private var _width:Number = 100;override public function get width():Numberreturn _width;override public function set width(value:Number):voidif(_width=value)return;_width = value;red
21、rawRequest = true;private var _height:Number = 100;override public function get height():Numberreturn _height;override public function set height(value:Number):voidif(_height = value)return;_height = value;redrawRequest = true;private var _redrawRequest:Boolean = false;/* 需要重绘背景的标志*/private function
22、 set redrawRequest(value:Boolean):voidif(_redrawRequest=value)return;_redrawRequest = value;addEventListener(Event.ENTER_FRAME,onEnterFrame);/* 延迟一帧来集中处理，减少不必要的重绘次数*/private function onEnterFrame(event:Event):voidremoveEventListener(Event.ENTER_FRAME,onEnterFrame);if(_redrawRequest)_redrawRequest =
23、false;drawBackground();/* 立即重绘*/ public function redrawNow():voidif(_redrawRequest)_redrawRequest = false;drawBackground();/* 绘制背景遮罩，子类可以覆盖此方法绘制指定的背景。*/ protected function drawBackground():voidthis.graphics.clear();if(_width=0|_height=0)return;this.graphics.beginFill(_maskColor,_maskAlpha);this.graphics.drawRect(0,0,_width,_height);if(_hollowWidth!=0this.graphics.endFill();this.graphics.lineStyle(2,0xFFCC00,1);this.graphics.drawEllipse(_hollowX,_hollowY,_hollowWidth,_hollowHeight);this.graphics.endFill();
