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

By On October 20, 2009 · 3 Comments

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.

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

 
Tagged with: •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

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

  1. guy says:
    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

    • Peter deHaan says:
      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