1

我试图实现的是一个简单的 flex 掩码，但我没有得到正确的方法或正确的方法。我什至不确定是否可以仅使用屏蔽方法。

我需要屏蔽整个 mc 并允许用户仅查看特定的矩形点。

我使用下面的代码完成了它（与原始代码略有不同）

  var s:Sprite = new Sprite();
  var g:Graphics = uc.graphics;         
  g.beginFill(0xff000,0.5);
  g.drawRect(0,0,100,100);
  g.endFill();
  s.x = 50;
  s.y = 50;
  obj.addChild(s);
  obj.mask = s;

上面的代码创建了一个 100x100 的矩形，并作为蒙版应用到另一个影片剪辑 obj 上。

这很好用，在这里我稍微想改变掩蔽的正常行为。这是通过使蒙面区域（不可访问区域）透明而不是完全隐藏它。

可能吗？

更新：

根据 Baris Uskli 的建议添加完整的修改后的 flex 代码：

掩码视图.mxml

<?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>

呼叫者

            var lbc:LightBoxConfiguration = new LightBoxConfiguration("box",100,100);

            lbc.height = 200;
            lbc.width = 300;

            var msk:MaskView = new MaskView();

            msk.conf = lbc;
            FlexGlobals.topLevelApplication.addElement(msk);

这给出了预期的效果，但不幸的是我无法点击矩形区域。我已设置 mouseEnabled = false; 也，但它没有用。我想我离实现它还差几步。

4

1 回答 1

1

可以使用 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;
}

希望有帮助。

编辑：一些只使蒙版区域可点击的魔法，并不完美，但也许有人可以改进。您可以将整个内容粘贴到一个空的 Flex 4 应用程序中，然后尝试通过蒙版或灰色区域单击按钮，蒙版区域将起作用。

<?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>

于 2012-05-10T22:00:39.803 回答