Search code examples
apache-flexactionscript-3flex4.5

How to scale and clip a BitmapImage in Flex 4.5

Here's my problem, I need to scale and clip images into square sized tiles to put into a tile list. Here's how I want it to work:

  1. I want all my tiles to be, say, 300px x 300px.

  2. For each image, I want to scale the shorter side (either width or height) to fit in the tile using the "letterbox" scaleMode (so that it maintains aspect ratio).

  3. Then I want to position the image in the center and clip away anything left over from either both sides or the top and bottom.

Here's an example to help clarify:

  • I have an image with width=600px and height=1200px. First I want to scale the image to width=300px and height=600px (notice that aspect ratio is maintained), then center the image vertically and clip the image to 300 x 300.

Is this possible? This is actually a pretty standard way of displaying square thumbnails in many photo-based web sites, but I can't find a way to make it work in flex.

Any help would be appreciated, thanks!

UPDATE JUNE 2012:

Just in case anyone finds this thread now, this issue has been resolved in the latest version of the Flex SDK. On the spark image object there is a new scaleMode of "zoom" which does exactly what I've asked for here.

Solution

  • Take your big image and draw it on BitmapData with scale and reposition:

    const zoom:Number = Math.max(THUMB_WIDTH/image.width, THUMB_HEIGHT/image.height);
const x:int = (THUMB_WIDTH - image.width*zoom)/2;
const y:int = (THUMB_HEIGHT - image.height*zoom)/2;
var matrix:Matrix = new Matrix;
matrix.scale(zoom, zoom);
matrix.translate(x, y);

var _thumbBitmap:BitmapData = new BitmapData(THUMB_WIDTH, THUMB_HEIGHT, false, 0xFFFFFF);
_thumbBitmap.draw(image, matrix, null, null, null, true);

    Then assign resulting BitmapData to the source of the BitmapImage.

    More: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#draw%28%29 http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/primitives/BitmapImage.html#source