Home/ Questions/Q 6378649
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T02:02:08+00:00

Here’s my problem, I need to scale and clip images into square sized tiles

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0