我有一个容器MovieClip,用作我需要掩盖的内容区域。当我使用Shape在这个容器中创建一个mask时,我似乎无法与我在这里创建的其他容器的内容交互,比如按钮等。
这就是我在代码中所做的事情(我已经省略了所有的导入等):
class MyContainer extends MovieClip
{
protected var masker : Shape = null;
protected var panel : MyPanel = null;
public function MyContainer()
{
this.masker = new Shape();
this.masker.graphics.clear();
this.masker.graphics.beginFill( 0x00ff00 );
this.masker.graphics.drawRect(0, 0, 1, 1); // 1x1 pixel.
this.masker.graphics.endFill();
addChild( this.masker );
this.panel = new MyPanel(); // has buttons and stuff.
addChild( this.panel );
this.mask = this.masker;
}
// called by it's parent when the stage is resized.
public function resize( width : Number, height : Number ) : void
{
// set the mask to half the size of the stage.
this.masker.width = width / 2;
this.masker.height = height / 2;
// set the panel to half the size of the stage.
this.panel.resize( width / 2, height / 2);
}
}
当我将掩码(Shape)添加到显示层次结构时,我无法再与MyPanel中定义的任何按钮进行交互。但是,不将掩码添加到显示层次结构中会让我与MyPanel上的内容进行交互,但掩码的大小/位置不正确。我猜,当掩码没有添加到显示层次结构时,它就位于电影的左上角(虽然我无法证明这一点)。
如何正确制作我的面具尺寸/位置并让用户与MyPanel中的按钮互动?
答案 0 :(得分:5)
this.masker.mouseEnabled = false; //set on this.masker
那应该有用。现在,在他们到达容器中的任何其他东西之前,它会拦截您的事件。不是100%肯定,但我相信面具将坐在容器的顶部。另一种选择是将另一个屏蔽子项添加到displayList底部的MyContainer,并添加面板作为其兄弟。您仍然希望在屏蔽的sprite / mc上将mouseEnabled和mouseChildren设置为false。
package
{
import flash.display.Shape;
import flash.display.Sprite;
public class MyContainer extends Sprite
{
protected var masker : Shape = null;
protected var panel:MyPanel;
public function MyContainer()
{
this.masker = new Shape();
this.masker.graphics.clear();
this.masker.graphics.beginFill( 0x00ff00 );
this.masker.graphics.drawRect(0, 0, 1, 1); // 1x1 pixel.
this.masker.graphics.endFill();
addChild( this.masker );
this.panel = new MyPanel();
this.addChild(panel);
this.mask = this.masker;
}
// called by it's parent when the stage is resized.
public function resize( width : Number, height : Number ) : void
{
// set the mask to half the size of the stage.
this.masker.width = width / 2;
this.masker.height = height / 2;
// set the panel to half the size of the stage.
}
}
}
-
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
public class MyPanel extends Sprite
{
public function MyPanel()
{
this.graphics.beginFill(0xFF0000)
this.graphics.drawRect(0,0,10,10);
this.addEventListener(MouseEvent.MOUSE_OVER, this.handleMouseOver)
this.addEventListener(MouseEvent.MOUSE_OUT, this.handleMouseOut)
}
public function handleMouseOver(event:Event):void
{
this.graphics.clear();
this.graphics.beginFill(0x00FF00)
this.graphics.drawRect(0,0,10,10);
}
public function handleMouseOut(event:Event):void
{
this.graphics.clear();
this.graphics.beginFill(0xFF0000)
this.graphics.drawRect(0,0,10,10);
}
}
}
答案 1 :(得分:1)
我注意到的一件事是,如果蒙版对象的孩子中的面具,所有鼠标相关事件或交互性的面具的位置将关闭,而视觉上一切似乎都很好。
例如,我有一个带有按钮的剪辑,它被一个孩子遮住了。发生了什么只是点击按钮的一半,如果我将剪辑向左移动一点,只有四分之一的按钮保持可点击状态。
基本上,鼠标事件掩蔽似乎相对于被遮罩对象的父对象定位,而视觉遮罩则不然。
您需要将蒙版移动到父剪辑。我是怎么做到的:
class MaskedObject extends MovieClip{
public var maskClip:MovieClip;
public var maskOrigin:Point
public function MaskedObject (){
maskOrigin = new Point(maskClip.x,maskClip.y);
parent.addChild(maskClip);
maskClip.x = maskOrigin.x + this.x;
maskClip.y = maskOrigin.y + this.y;
mask = maskClip;
}
override function set x(val:Number):void{
super.x = val;
maskClip.x = maskOrigin.x + this.x;
}
override function set y(val:Number):void{
super.y = val;
maskClip.y = maskOrigin.y + this.y;
}
}