4 Replies Latest reply on Jul 25, 2010 1:05 PM by Francisc

    Scaling masked image

    Francisc Level 3



      I use this code:


      <s:Group id="imgMask">

          <s:Rect id="rectMask" radiusX="10" radiusY="10" width="300" height="150">


                  <s:SolidColor color="#FFFFFF"/>




      <mx:Image id="imgUserPic" width="300" height="150" mask="{imgMask}"

          maintainAspectRatio="true" scaleContent="true" smoothBitmapContent="true"

          horizontalAlign="center" verticalAlign="middle"/>


      So basically an image with a rounded corners rectangle mask.


      The default behaviour is to scale to fit the image entirely inside the mask.


      What I want is to have the mask always full.


      For example, if a 600x600 image is loaded, it will scale the image to fit inside thus making the height be that of the Image container and leave out some white margins to the left and right of the mask.


      How can I make it so that it will always fill the mask?


      In my example, that would mean scale the image to have the width that of the mask (300) and the height whatever value is proportional (in this example also 300), even if it means leaving a bit of it outsde.



        • 1. Re: Scaling masked image
          CannotCompute Level 1

          I think you would have to manually scale the image that way using a matrix. With the flex mx:Image scaleContent="true" (which I think is set to true by default), it is going to scale the image to fit the Image container.  So instead, you would have to listen for a resize of your masking container, and manually scale the content to the mask containers dimensions.


          I hope that helps.

          1 person found this helpful
          • 2. Re: Scaling masked image
            Francisc Level 3

            Yup, thanks!

            • 3. Re: Scaling masked image
              rtalton Level 4


              I've needed something like this in the past so I threw one together. If you can use it, feel free.


              <?xml version="1.0" encoding="utf-8"?>
              <mx:Image xmlns:mx="http://www.adobe.com/2006/mxml"


                  <!-- ImageScaler component -->


                  <!-- An Image component that scales itself to a parent
                       container with a FIXED width/height,
                       while maintaining its aspect ratio.


                       Changing the source property of this component
                       causes it to scale itself proportionally to its
                       parent container so that the larger of its
                       width/height dimensions scales to fit the parent.
                       This will clip the other dimension, but the result is
                       the image fits nicely with no empty space in the
                       parent container.


                       It should be used in a container with a fixed width/height,
                       and it will scale itself to fit that container.


                       We use the 'complete' event
                       (the image has been loaded into the SWFLoader)
                       as the trigger.


                       Do not set the width/height of this Image component in the parent.
                       Distortion will occur!


                       NOT using pixel-based measurement for the width/height of the parent container,
                       OR setting a percentage-based width/height for the parent container
                       will cause this component to behave exactly like a normal Image component.
                       It will not scale itself. This is to avoid any scaling distortions.
                          import mx.core.UIComponent;


                          private function handleCompleteEvent():void {
                              //Scale Image component to the width or height of the parent container.            


                              //Check that the parent has width/height set AND
                              //does NOT have a percentWidth/Height set.
                              //otherwise, return without scaling.
                              var parentContainer:UIComponent = this.parent as UIComponent;
                              if (this.parent.width == 0 || this.parent.height == 0
                                  || !isNaN(parentContainer.percentWidth) || !isNaN(parentContainer.percentHeight)) {


                              //Which results in a larger Scale factor?
                              //Use it to scale the image on that dimension.
                              var xScaleFactor:Number = Number((this.parent.width / contentWidth).toPrecision(3));
                              var yScaleFactor:Number = Number((this.parent.height / contentHeight).toPrecision(3));
                              if (xScaleFactor > yScaleFactor){
                                  //fit width to parent
                                  scaleX = xScaleFactor;
                                  scaleY = scaleX;                   
                                  //fit height to parent
                                  scaleY = yScaleFactor;
                                  scaleX = scaleY;



              • 4. Re: Scaling masked image
                Francisc Level 3

                Thank you, nice way of solving this.