CODEWITHSUNDEEP
apache-flexactionscript-3flex4.5
Andy
Andy

Reputation: 4675

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:

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.

Upvotes: 3

Views: 3205

Answers (1)

moropus
moropus

Reputation: 3782

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

Upvotes: 2

Related Questions