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

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>

[GoogleAdsWide]

View source is enabled in the following example.

3 thoughts on “Rounding individual corners of an Image control in Flex using a mask

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

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

Comments are closed.