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

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

1. mayur says:

   September 16, 2008 at 11:44 pm

   really a good example

   Reply
2. dannyd says:

   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?

   Reply
   • Usman Ajmal says:

     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
3. Nicko says:

   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.

   Reply
4. Chris says:

   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>
   

   Reply
5. Peter deHaan says:

   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

   Reply
6. Brandon says:

   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.

   Reply
7. guy says:

   October 20, 2009 at 2:22 am

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

   Reply
   • Peter deHaan says:

     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

     Reply
8. guy says:

   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

   Reply
   • Peter deHaan says:

     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

     Reply
     • guy says:

       October 21, 2009 at 12:07 am

       Thanks Peter, that did the job
9. Brandon B says:

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

   Reply
10. Tahir Alvi says:

    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

    Reply
11. Flex man says:

    April 30, 2011 at 3:42 pm

    Hi

    Is there a way to do this as a preloader, masking an image?

    Reply
12. risdiyanto says:

    June 16, 2011 at 1:44 am

    is it support with old browser n css2?

    Reply
13. jonnie says:

    October 21, 2011 at 8:21 am

    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?

    Reply
    • jonnie says:

      October 21, 2011 at 9:40 am

      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

      Reply
14. Eugen says:

    December 27, 2011 at 12:41 pm

    hi Peter,

    it’s possible use this example on dynamical created images?

    For example:

    Reply