Rounding individual corners of an Image control in Flex using a mask

by Peter deHaan on October 20, 2009

in Image

In a previous example, “Rounding the corners of an Image control in Flex using a mask”, we saw how to round the corners on a Flex Image control by creating a rounded Sprite control using the drawRoundRect() method and setting the mask property.

The following example shows how you can round selected corners of an Image control in Flex by creating a rounded Sprite control using the drawRoundRectComplex() method and setting the mask property.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/20/rounding-individual-corners-of-an-image-control-in-flex-using-a-mask/ -->
<mx:Application name="Image_mask_test2"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.events.ResizeEvent;
 
            private var roundedMask:Sprite;
 
            private function init():void {
                roundedMask = new Sprite();
                canvas.rawChildren.addChild(roundedMask);
            }
 
            private function image_resize(evt:ResizeEvent):void {
                var w:Number = evt.currentTarget.width;
                var h:Number = evt.currentTarget.height;
                var cornerRadius:uint = 60;
                roundedMask.graphics.clear();
                roundedMask.graphics.beginFill(0xFF0000);
                roundedMask.graphics.drawRoundRectComplex(0, 0,
                    w, h,
                    0, cornerRadius,
                    0, cornerRadius);
                roundedMask.graphics.endFill();
                image.mask = roundedMask;
            }
        ]]>
    </mx:Script>
 
    <mx:Canvas id="canvas">
        <mx:Image id="image"
                source="http://www.helpexamples.com/flash/images/image1.jpg"
                resize="image_resize(event);" />
    </mx:Canvas>
 
</mx:Application>

View source is enabled in the following example.

{ 3 comments… read them below or add one }

1 guy October 20, 2009 at 3:32 pm

I see you moved this post here, so I’ll join with my question…

Thanks Peter, that worked great.

Sorry to nag but do you know maybe how I can also add a pixel border to the outcome rounded image? I managed that before rounding the corners with a box behind it but that won’t do the work now.

Thanks in advance,
Guy

Reply

2 Peter deHaan October 20, 2009 at 4:22 pm

@guy,

I replied to the other thread also, but I’ll post the short version here as well. You can add a GlowFilter to the Canvas and it should do what you’re looking for (but you may need to adjust the settings to make it look right for your app):

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/ -->
<mx:Application name="Image_mask_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.events.ResizeEvent;
 
            private var roundedMask:Sprite;
 
            private function init():void {
                roundedMask = new Sprite();
                canvas.rawChildren.addChild(roundedMask);
            }
 
            private function image_resize(evt:ResizeEvent):void {
                var w:Number = evt.currentTarget.width;
                var h:Number = evt.currentTarget.height;
                var cornerRadius:uint = 60;
 
                roundedMask.graphics.clear();
                roundedMask.graphics.beginFill(0xFF0000);
                roundedMask.graphics.drawRoundRectComplex(0, 0,
                    w, h,
                    0, cornerRadius,
                    0, cornerRadius);
                roundedMask.graphics.endFill();
                image.mask = roundedMask;
            }
        ]]>
    </mx:Script>
 
    <mx:Canvas id="canvas">
        <mx:filters>
            <mx:GlowFilter blurX="5" blurY="5" strength="6" color="#FF0000" inner="false" />
        </mx:filters>
        <mx:Image id="image"
                  source="http://www.helpexamples.com/flash/images/image1.jpg"
                  resize="image_resize(event);" />
    </mx:Canvas>
 
</mx:Application>

Peter

Reply

3 guy October 21, 2009 at 12:07 am

Thanks Peter, that did the job

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: