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

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

19 thoughts on “Rounding the corners of an Image control in Flex using a mask

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

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

  2. ‘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.

  3. 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>
    
  4. 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

    1. @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

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

    1. @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

  6. 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.,

  7. Please help me.

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

    Thnaks

  8. great example.
    but i’m having some dificulty when i’m rounding the corners of some images, for instance if i have an image with 1024×768, it works like a charm, but if there’s an image with 1024×1280 it will only round two corners and on the other two it will not work, it draws a straight line.
    any ideas on how can i solve this?

    1. while testing i came up with this.
      if the image has a width and a height set it will not work, but if no width or height are defined than it works!!
      i would like to round the corners with an image with width and height fixed

Comments are closed.