Comments on: Rounding the corners of an Image control in Flex using a mask http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/ Just a bunch of Adobe Flex Examples Fri, 19 Mar 2010 09:24:33 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: Tahir Alvi http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6481 Tahir Alvi Fri, 27 Nov 2009 10:43:18 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-6481 Please help me. i want to erase the drawing after some drawing, drawing maybe line rectangle dot or anything. Thnaks Please help me.

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

Thnaks

]]> By: Brandon B http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6288 Brandon B Sat, 07 Nov 2009 10:15:13 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-6288 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., 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.,

]]> By: Usman Ajmal http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6135 Usman Ajmal Tue, 27 Oct 2009 06:59:51 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-6135 <blockquote>Can this portion of the tag be used to create a FLEX based lightbox similar to java lightboxes that I have seen?</blockquote> Did you manage to find a way of creating a Flex based lightbox? I need the lightbox functionality in one of my Flex application.

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.

]]> By: guy http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6077 guy Wed, 21 Oct 2009 07:07:06 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-6077 Thanks Peter, that did the job Thanks Peter, that did the job

]]> By: Peter deHaan http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6075 Peter deHaan Tue, 20 Oct 2009 23:20:51 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-6075 @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: <pre lang="mxml"> <?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> </pre> Peter @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

]]> By: guy http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6073 guy Tue, 20 Oct 2009 21:12:34 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-6073 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 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

]]> By: Peter deHaan http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6068 Peter deHaan Tue, 20 Oct 2009 14:17:56 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-6068 @guy, Instead of using the <code>drawRoundRect()</code> method, use the <code>drawRoundRectComplex()</code> method which allows you to specify the radius of each corner separately: <pre lang="mxml"> <?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> </pre> Peter @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

]]> By: guy http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-6064 guy Tue, 20 Oct 2009 09:22:52 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-6064 Does anyone know how to round only the two corners on the right? Does anyone know how to round only the two corners on the right?

]]> By: Brandon http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-5236 Brandon Wed, 19 Aug 2009 03:59:56 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-5236 This example didn't work quite right when using it with a maxWidth or maxHeight, so I refactored it and posted the source <a href="http://www.brandondement.com/blog/2009/06/21/creating-an-image-with-rounded-corners/" rel="nofollow">here</a>. This example didn’t work quite right when using it with a maxWidth or maxHeight, so I refactored it and posted the source here.

]]> By: Peter deHaan http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/comment-page-1/#comment-3800 Peter deHaan Sat, 20 Jun 2009 01:29:56 +0000 http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/#comment-3800 Chris, This seems to work for me: <pre class="code"> <mx:Image id="image" source="@Embed('assets/fl_appicon.jpg')" resize="image_resize(event);" /> </pre> If yours isn't working, I'd probably start by checking if that <code>resize</code> event is ever dispatched. If not, perhaps try changing it to an <code>initialize</code> or <code>creationComplete</code> event handler and see if that does the trick. Peter 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

]]>