1

私が達成しようとしていたのは、フレックスでの単純なマスキングですが、正しく取得していないか、正しいアプローチを取得していません。マスキング方法だけでそれが可能かどうかさえわかりません。

完全な 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 の提案に基づいて完全に変更されたフレックス コードを追加します。

MaskView.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 に答える