actionscript-3 - flex4.6のこの動的マスク

Question

次の画像に示すように、コンポーネントの動的マスクを作成する必要があります。これらの白い円はさまざまな場所に表示されます。黒い領域にコンテンツが含まれ、白い領域が透明な領域になります（必要に応じて色を変更できます）。

このマスクを作る方法の手がかりはありません。何か助けはありますか？

Answer 1

BitmapImageこれは、これを行うためのmaskTypeプロパティを使用するアプリです。この手法はBitmapImage、SparkGraphicElementクラスを拡張する およびその他のコンポーネントでのみ機能することに注意してください。

このGraphicElementクラスはmaskTypeプロパティを定義します。これを設定するMaskType.LUMINOSITYと、「通常の」マスキングとは逆になります。何も描画されていないマスキング オブジェクトの領域には、下にあるオブジェクトが表示されます。マスキング オブジェクト内の何かが描画されている領域は透明になります。

<?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="onCreationComplete()"
               backgroundColor="#0">
    <fx:Script>
        <![CDATA[
            import spark.core.MaskType;

            protected function onCreationComplete():void
            {
                var circles:Array = [
                    { x:25, y:25, radius:20 },
                    { x:100, y:100, radius:50 },
                    { x:200, y:50, radius:25 } ];

                var circleSprite:Sprite=new Sprite();
                drawMaskCircles(circles, circleSprite.graphics);
                image.mask=circleSprite;
                image.maskType=MaskType.LUMINOSITY;
            }

            private function drawMaskCircles(circles:Array, g:Graphics):void
            {
                var l:int = circles.length;
                g.clear();
                g.beginFill(0);
                for (var i:int=0; i<l; i++)
                {
                    var o:Object = circles[i];
                    g.drawCircle(o.x, o.y, o.radius);
                }
                g.endFill();
            }

        ]]>
    </fx:Script>

    <s:BitmapImage id="image" source="klimt12-hp.jpg"/>

</s:Application>

ではないものでこのアプローチを使用する場合GraphicElementは、コンポーネントのスナップショットを作成してビットマップ データをキャプチャし、そのビットマップ データを別の で使用する必要がありますBitmapImage。たとえば、拡張するコンポーネントをマスクしたいとしましょうVGroup:

// assuming component that extends VGroup is a variable named: vgroup
var bmd:BitmapData = new BitmapData(vgroup.width, vgroup.height);
bmd.draw(vgroup);

// now we have captured a snapshot of the component
// show this to the user with a BitmapImage
var vgroupImage:BitmapImage=new BitmapImage();
vgroupImage.source = bmd;

// now apply the circleSprite (created in the code above) as the mask
vgroupImage.mask = circleSprite;
vgroupImage.maskType = MaskType.LUMINOSITY;
addElement(vgroupImage);