3 Replies Latest reply on Oct 2, 2006 6:41 PM by peterent

    Image with Round Border

    mianor64121
      Hi,

      I can't figure out how to display an image with round border (without modifying the source image of course :))
      There is no cornerRadius attribute, we can't define a border skin class... maybe with masks but I tried without success. Any idea ?

        • 1. Re: Image with Round Border
          inlineblue Level 1
          One thought is to stick the image inside a Canvas that has a rounded border.
          • 2. Re: Image with Round Border
            mianor64121 Level 1
            Thank you for your response but it doesn't work. I wonder if it's possible...
            • 3. Re: Image with Round Border
              peterent Level 2
              What you are looking for isn't a border - its a mask. Try this out:

              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

              <mx:Script>
              <![CDATA[
              import mx.core.FlexShape;
              import mx.core.UIComponent;

              private function setupMask() : void
              {
              var mask:UIComponent = new UIComponent();
              mask.graphics.clear();
              mask.graphics.beginFill(0x000000,1);
              mask.graphics.drawCircle(100,100,50);
              mask.graphics.endFill();
              imageFrame.addChild(mask);
              imageFrame.mask = mask;
              }
              ]]>
              </mx:Script>

              <mx:Canvas id="imageFrame" width="200" height="200" creationComplete="setupMask()" x="130" y="80" borderStyle="solid" borderThickness="1" borderColor="0">
              <mx:Image width="100%" height="100%" scaleContent="true"
              source=" your image here"
              horizontalAlign="center"
              verticalAlign="middle" />
              </mx:Canvas>

              </mx:Application>