0

Flex内にを描画し、<s:Ellipse>それを使用して画像をマスクする方法はありますか？これが私<s:Ellipse>が書いたものです：

<s:Ellipse id="imageFrame" width="150" height="150" rotation="325" top="50" left="50">
    <s:stroke>
        <s:LinearGradientStroke weight="5">
            <s:GradientEntry color="0x000000"/>
            <s:GradientEntry color="0xFFFFFF"/>
            <s:GradientEntry color="0x000000"/>
        </s:LinearGradientStroke>
    </s:stroke>
</s:Ellipse>

...次のようになります：

ここに画像の説明を入力してください

コンポーネントを使用して画像をロードし<s:Image>、リングの内側に配置し、中央の穴だけが額縁のように画像を表示するように画像をマスクしたいと思います。

それは可能ですか、それとも楕円の中心にある「穴」が目に見えない塗りつぶしであるため、それは不可能ですか？

お時間をいただきありがとうございます。

4

1 に答える 1

2

SpriteVisualElement1つのアプローチは、表示オブジェクトのグラフィックスに円を描くことによって画像をマスクすることです。

マスク

<?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"
               backgroundColor="0x0">

    <fx:Script>
        <![CDATA[
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                super.updateDisplayList(unscaledWidth, unscaledHeight);

                var g:Graphics = imageMask.graphics;
                g.clear();
                g.beginFill(0xff);
                g.drawEllipse(50, 50, 150, 150);
                g.endFill();
            }
        ]]>
    </fx:Script>

    <s:Image id="image"
             mask="{imageMask}"
             source="http://www.artyfactory.com/art_appreciation/art_movements/art%20movements/cubism/still_life_with_mandolin.jpg" />

    <s:SpriteVisualElement id="imageMask" />

    <s:Ellipse id="imageFrame"
               width="150"
               height="150"
               rotation="325"
               top="50"
               left="50">
        <s:stroke>
            <s:LinearGradientStroke weight="5">
                <s:GradientEntry color="0x000000" />
                <s:GradientEntry color="0xFFFFFF" />
                <s:GradientEntry color="0x000000" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Ellipse>

</s:Application>
于 2012-07-21T05:16:03.993 に答える