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

by Peter deHaan on September 9, 2008

The following example shows how you can round the corners on a Flex Image control by creating a rounded Sprite control using the drawRoundRect() method and setting the mask property.

Full code after the jump.

<?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.drawRoundRect(0, 0,
                            w, h,
                            cornerRadius, 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:Image>
    </mx:Canvas>
 
</mx:Application>

View source is enabled in the following example.

If you wanted to round specific corners on an Image control, see “Rounding individual corners of an Image control in Flex using a mask”.

Tagged as: drawRoundRect(), graphics, mask

{ 14 comments… read them below or add one }

1 mayur September 16, 2008 at 11:44 pm

really a good example

2 dannyd October 12, 2008 at 8:49 pm

Can this portion of the tag be used to create a FLEX based lightbox similar to java lightboxes that I have seen?

private function image_resize(evt:ResizeEvent):void {
var w:Number = evt.currentTarget.width;
var h:Number = evt.currentTarget.height;

I have been trying to figure out how to create a FLEX lightbox slideshow that resizes to my images that the image appears over a modal style blur since I got FLEX a year ago and I have had little luck creating one.

Are there any similar examples currently on the site?

3 Usman Ajmal October 26, 2009 at 11:59 pm: Can this portion of the tag be used to create a FLEX based lightbox similar to java lightboxes that I have seen?

Did you manage to find a way of creating a Flex based lightbox? I need the lightbox functionality in one of my Flex application.

Reply

4 Nicko October 22, 2008 at 12:28 pm

‘m just starting work on a Flex project which requires tons of design and color customizations – 20 minutes into it and I am already pulling my hair out. Here’s why.
The UI consists of two HBoxes on a Canvas. Each HBox should have a background image and rounded corners – should be easy as both properties can be set via the Flex Properties inspector, in fact I should be able to do it all in Design view.
I first tinkered with a solid background color. The first stumbling block was the fact that the cornerRadius property only renders if borderStyle is set to solid. Thanks Owen for the tip, this would have had me fallen at the first hurdle. I didn’t get the memo…
I then moved on to testing a PNG image as the background for the HBox. Adding this was easy – but the corners were no longer rounded.

The image now renders across the entire area of the HBox, including the rounded corners.
Can this be avoided? I am aware that I could probably script my way around this in AS (even though I am not quite sure how) but the point is that I shouldn’t have to. I’ve now spent the best part of 2 hours on something that should take 5 minutes… and I still haven’t got the look that I need. sorry about the rant but stuff like this really frustrates me.

5 Chris June 19, 2009 at 12:14 pm

This works great unless the image’s source is embeded. Any reason why this won’t work? Workarounds?

<mx:Image id="image"
    source="@Embed(source='/img/roundme.jpg')"
    resize="image_resize(event);">
</mx:Image>

6 Peter deHaan June 19, 2009 at 6:29 pm

Chris,

This seems to work for me:

<mx:Image id="image"
        source="@Embed('assets/fl_appicon.jpg')"
        resize="image_resize(event);" />

If yours isn’t working, I’d probably start by checking if that resize event is ever dispatched. If not, perhaps try changing it to an initialize or creationComplete event handler and see if that does the trick.

Peter

7 Brandon August 18, 2009 at 8:59 pm

This example didn’t work quite right when using it with a maxWidth or maxHeight, so I refactored it and posted the source here.

8 guy October 20, 2009 at 2:22 am

Does anyone know how to round only the two corners on the right?

9 Peter deHaan October 20, 2009 at 7:17 am

@guy,

Instead of using the drawRoundRect() method, use the drawRoundRectComplex() method which allows you to specify the radius of each corner separately:

<?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:Image id="image"
                source="http://www.helpexamples.com/flash/images/image1.jpg"
                resize="image_resize(event);" />
    </mx:Canvas>
 
</mx:Application>

Peter

10 guy October 20, 2009 at 2:12 pm

Thanks Peter, that worked great.

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

Thanks in advance,
Guy

11 Peter deHaan October 20, 2009 at 4:20 pm

@guy,

Not sure the best way to add strokes/borders to an irregularly shaped object, but you can just use a GlowFilter, as shown in the following example:

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

12 guy October 21, 2009 at 12:07 am: Thanks Peter, that did the job

13 Brandon B November 7, 2009 at 2:15 am

How Would You get something like this to work on an Image,in The Array Collection,or The Repeater?
I tried,all types of different methods,and nothing seems to just work.
any advice would certainly be excellent.,

14 Tahir Alvi November 27, 2009 at 2:43 am

Please help me.

i want to erase the drawing after some drawing, drawing maybe line rectangle dot or anything.

Thnaks

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

Pages

Recent Posts

Archives

But wait, there’s more…

Advertising

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

Pages

Recent Posts

Archives

Blogroll

But wait, there’s more…

Advertising