Actionscript 3 Flex 4-添加动态透明遮罩
我试图在flex中实现的是一个简单的屏蔽，但我没有正确地使用它或正确的方法。我甚至不确定仅仅使用掩蔽方法是否可行 我需要遮罩完整的mc，并允许用户只查看一个特定的矩形点 我使用下面的代码完成了它（与原始代码略有不同） 上面的代码创建了一个100x100的矩形，并将其作为遮罩应用于另一个movieclip对象 这很好，这里我想稍微改变掩蔽的正常行为。这是通过使遮罩区域（不可访问区域）透明，而不是完全隐藏它 可能吗 更新： 根据Baris Uskli的建议添加完整的修改过的flex代码： MaskView.mxmlActionscript 3 Flex 4-添加动态透明遮罩,actionscript-3,flex4,masking,Actionscript 3,Flex4,Masking,我试图在flex中实现的是一个简单的屏蔽，但我没有正确地使用它或正确的方法。我甚至不确定仅仅使用掩蔽方法是否可行 我需要遮罩完整的mc，并允许用户只查看一个特定的矩形点 我使用下面的代码完成了它（与原始代码略有不同） 上面的代码创建了一个100x100的矩形，并将其作为遮罩应用于另一个movieclip对象 这很好，这里我想稍微改变掩蔽的正常行为。这是通过使遮罩区域（不可访问区域）透明，而不是完全隐藏它 可能吗 更新： 根据Baris Uskli的建议添加完整的修改过的flex代码： MaskV
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" left="0" top="0" width="100%" height="100%" creationComplete="showMask()"
blendMode="layer">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<!--<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0x00aabb" alpha="0.5" />
</s:fill>
</s:Rect>-->
<fx:Script>
<![CDATA[
import mx.core.UIComponent;
//public static var app:Object;
//private var
public var conf:LightBoxConfiguration;
public function showMask():void{
this.graphics.beginFill(0x000000,0.6);
this.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
this.graphics.endFill();
var uc:UIComponent = new UIComponent();
uc.mouseEnabled = false;
var g:Graphics = uc.graphics;
g.beginFill(0xff000,0.5);
if (conf.shape == "box"){
uc.width = conf.width;
uc.height = conf.height;
//TODO:need to fix this
g.drawRect(0,0,conf.width,conf.height);
}else{
uc.width = conf.radius*2;
uc.height = conf.radius*2;
g.drawCircle(0,0,conf.radius);
}
g.endFill();
uc.x = conf.x;
uc.y = conf.y;
uc.blendMode = BlendMode.ERASE;
this.addElement(uc);
}
]]>
</fx:Script>
</s:Group>
这是给预期的效果，但不幸的是，我无法点击通过矩形区域。我已将mouseEnabled设置为false；但它也不起作用。我想我离实现它还有几步之遥。使用BlendModes是可能的。下面是一些代码，绘制一个全屏透明精灵，并在其中遮罩一个矩形区域
private function mask():void
{
this.graphics.beginFill(0x000000, 0.6);
this.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
this.graphics.endFill();
var maskSprite:Sprite = new Sprite();
maskSprite.graphics.beginFill(0xffffff, 1);
maskSprite.graphics.drawRect(x,y,width,height);
maskSprite.graphics.endFill();
addChild(maskSprite);
this.blendMode = BlendMode.LAYER;
maskSprite.blendMode = BlendMode.ERASE;
}
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="showMask()"
addedToStage="onAddedToStage()"
>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button label="test" x="140" y="120" click="onButtonClicked(event)"></s:Button>
<s:Group id="maskGroup" blendMode="layer" width="800" height="600" ></s:Group>
<fx:Script>
<![CDATA[
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Point;
import mx.controls.Alert;
import mx.core.UIComponent;
private var uc:UIComponent = new UIComponent();
private function onAddedToStage():void
{
this.addEventListener(MouseEvent.CLICK, onMouseClicked, true);
}
private function onButtonClicked(e:MouseEvent):void
{
Alert.show("clicked button");
}
private function onMouseClicked(e:MouseEvent):void
{
var objects:Array = getObjectsUnderPoint(new Point(stage.mouseX, stage.mouseY));
var clickedInMask:Boolean = false;
for each (var dp:DisplayObject in objects)
{
if (dp == uc)
{
clickedInMask = true;
break;
}
}
if(!clickedInMask)
e.stopImmediatePropagation();
}
private function showMask():void
{
maskGroup.mouseEnabled = false;
maskGroup.mouseChildren = false;
var sp:Sprite = new Sprite();
sp.graphics.clear();
sp.graphics.beginFill(0x000000,0.6);
sp.graphics.drawRect(0,0,800,600);
sp.graphics.endFill();
var spC:UIComponent = new UIComponent();
spC.addChild(sp);
maskGroup.addElement(spC);
uc.x = 100;
uc.y = 100;
maskGroup.addElement(uc);
var g:Graphics = uc.graphics;
g.beginFill(0xffffff,1);
g.drawRect(0,0,100,100);
g.endFill();
uc.blendMode = BlendMode.ERASE;
}
]]>
</fx:Script>
使用BlendModes是可能的。下面是一些代码，绘制一个全屏透明精灵，并在其中遮罩一个矩形区域
private function mask():void
{
this.graphics.beginFill(0x000000, 0.6);
this.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
this.graphics.endFill();
var maskSprite:Sprite = new Sprite();
maskSprite.graphics.beginFill(0xffffff, 1);
maskSprite.graphics.drawRect(x,y,width,height);
maskSprite.graphics.endFill();
addChild(maskSprite);
this.blendMode = BlendMode.LAYER;
maskSprite.blendMode = BlendMode.ERASE;
}
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="showMask()"
addedToStage="onAddedToStage()"
>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button label="test" x="140" y="120" click="onButtonClicked(event)"></s:Button>
<s:Group id="maskGroup" blendMode="layer" width="800" height="600" ></s:Group>
<fx:Script>
<![CDATA[
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Point;
import mx.controls.Alert;
import mx.core.UIComponent;
private var uc:UIComponent = new UIComponent();
private function onAddedToStage():void
{
this.addEventListener(MouseEvent.CLICK, onMouseClicked, true);
}
private function onButtonClicked(e:MouseEvent):void
{
Alert.show("clicked button");
}
private function onMouseClicked(e:MouseEvent):void
{
var objects:Array = getObjectsUnderPoint(new Point(stage.mouseX, stage.mouseY));
var clickedInMask:Boolean = false;
for each (var dp:DisplayObject in objects)
{
if (dp == uc)
{
clickedInMask = true;
break;
}
}
if(!clickedInMask)
e.stopImmediatePropagation();
}
private function showMask():void
{
maskGroup.mouseEnabled = false;
maskGroup.mouseChildren = false;
var sp:Sprite = new Sprite();
sp.graphics.clear();
sp.graphics.beginFill(0x000000,0.6);
sp.graphics.drawRect(0,0,800,600);
sp.graphics.endFill();
var spC:UIComponent = new UIComponent();
spC.addChild(sp);
maskGroup.addElement(spC);
uc.x = 100;
uc.y = 100;
maskGroup.addElement(uc);
var g:Graphics = uc.graphics;
g.beginFill(0xffffff,1);
g.drawRect(0,0,100,100);
g.endFill();
uc.blendMode = BlendMode.ERASE;
}
]]>
</fx:Script>
非常感谢。这正是我想要的。不幸的是，我无法点击通过矩形孔（遮罩）。我已经将mouseEnabled设置为false，允许它忽略点击，但它不工作。我添加了最初使用as3为flex编写的完整代码。请提供帮助。如果将mouseEnabled设置为false，则不会调度任何鼠标事件，您可能希望捕获精灵上的所有鼠标单击，然后按事件停止不在矩形区域中的鼠标单击。stopImmediatePropagation（）我实际上想要相同的掩蔽行为，但我需要用透明颜色显示箭头。我原以为如果我禁用MaskPrites的MouseeEvents，它会单击下面的对象，但事实并非如此。嗯，也许可以尝试在MaskView上设置MouseeEnabled和mouseChildren false，但不确定这是否会帮到你。不幸的是，使每件事都可单击使MaskPrites的概念仅用于突出显示区域：（我尝试了更多的mouseenable和disable的组合，但都没有成功：（非常感谢。这正是我想要的。不幸的是，我无法点击矩形孔（遮罩）。我已将MouseeEnabled设置为false，以允许它忽略单击，但它不起作用。我已添加了最初使用as3为flex编写的完整代码。您能提供帮助吗？如果将MouseeEnabled设置为false，则不会调度任何鼠标事件，您可能希望捕获精灵上的所有鼠标单击，然后停止那些不可用的事件的矩形区域中的t。stopImmediatePropagation（）事实上，我想要相同的遮罩行为，除了我需要用透明的颜色显示sourrounding。我希望如果我禁用maskSprites的mouseevents，那么它将单击下面的对象，但事实并非如此。嗯，也许可以尝试在MaskView上设置mouseEnabled和mouseChildren false，但不确定这是否会对您有所帮助。不幸的是自然地，使每一件事都可点击使遮罩的概念仅用于突出显示区域：（我尝试了更多的mouseenable和disable组合，但没有一个有效：(