4 Replies Latest reply on Jun 25, 2010 9:21 AM by David_F57

    resize & center crop image

    jsd99 Level 3

      Does anybody have an example of how you would take an mx:Image, loaded from an arbitrary URL, and scale it to an arbitrary rectangle, cutting off the edges to fit.  On the iPhone this is so easy but I've been beating my head against Flex for days now.

       

      If the original image is 120x90 and I want to fit it in a 64x64 square in Flash, I would want the image to be resized to 85x64 and then clip off 10 pixels on either side.  If it's 90x120 then resize to 64x85 and clip off top & bottom instead of left & right.

        • 1. Re: resize & center crop image
          David_F57 Level 5

          hi,

           

          There is the simple way and the hard way - this is the simple way, just resize the image container and place it in a holdercontainer that matches your dimensions, the hard way is to apply transform scaling and redrawing the required portion to a new image for display(I don't have time to do this at the moment).

           

          Just note with the simple way  if the image is portrait or landscape it will still center to the holding container.

           

          <?xml version="1.0" encoding="utf-8"?>

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

             xmlns:s="library://ns.adobe.com/flex/spark"

             xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

          <fx:Script>

          <![CDATA[

          import mx.events.FlexEvent;

           

          protected function image1_creationCompleteHandler(event:FlexEvent):void

          {

          if (img.contentHeight > img.contentWidth)

          {

          img.width = holder.width;

          img.height = holder.height*img.contentHeight/img.contentWidth;

          }

          else

          {

          img.height = holder.height;

          img.width = holder.width*img.contentWidth/img.contentHeight;

          }

          }

           

          ]]>

          </fx:Script>

          <fx:Declarations>

          <!-- Place non-visual elements (e.g., services, value objects) here -->

          </fx:Declarations>

          <mx:Canvas id="holder" x="186" y="110" width="100" height="100" verticalScrollPolicy="off" horizontalScrollPolicy="off">

          <mx:Image id="img" x="0" y="0" source="Koala.jpg" verticalCenter="0" horizontalCenter="0" creationComplete="image1_creationCompleteHandler(event)"/>

          </mx:Canvas>

          </s:Application>

          • 2. Re: resize & center crop image
            rootsounds Level 4

            That or pick up one of the third-party classes people have posted that can pull this off.

            • 3. Re: resize & center crop image
              jsd99 Level 3

              Thanks for the replies.  I discovered the Matrix thing myself yesterday and have been going down that path as it seems that's the only way to resize an image larger than its original dimensions.

               

              However, if anyone has a link to an already-written class that does the same thing, please let me know.  My Googling has so far been fruitless.

              • 4. Re: resize & center crop image
                David_F57 Level 5

                hi,

                 

                I have put up rescaling examples in the forum before - that may help you

                 

                http://forums.adobe.com/message/2850089#2850089

                 

                 

                David.