Question

Is there a way within Flex to draw an <s:Ellipse> and use it to mask an image? Here is an <s:Ellipse> that I have written:

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

… that looks like this:

I would like to load an image using the <s:Image> component, place it inside of the ring, and mask the image so that only the hole in the center is displaying the image, much like a picture frame.

Can that be done, or is that not possible since the “hole” in the center of the ellipse is just invisible fill?

Thank you for your time.

Answer 1

One approach would be to mask an image by drawing a circle on the graphics of a SpriteVisualElement display object.

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