Math Installment #1: Image layout logic

Turns out most of the code I write that does deal with math is layout code in order to manage how a number of assets, whether it be controls or graphics, is rendered to the screen. Over the past couple of days the kind of code I have been writing is in managing the various kinds of transforms that can be applied to images in order to display them in a number of different ways. Turns out rendering an image has to do with several factors. The first factor is the size of the original image. This will mean the height and the width of the image. The second factor is the size of the target area that you are rendering it into. Based on these factors you get quite a few options for transforming the source into the target. The following diagram shows just a few of the options available (actually most of them).

Let's quickly sum up the options. For the first transformation from a larger image to a smaller area you can either stretch to fit (technically shrink to fit) where the ratio between the height and width may not be preserved, perform an aspect ratio fit where the ratio between the height and width are maintained, create a scrollable view area where only a portion of the image is viewed at a time based on user input, or a fixed offset view where you display a certain portion of the image but don't allow scrolling. This last item, the fixed offset view area is most often realized as a centering option that displays only a center region of the source image in the target.

Going in the opposite direction we have some of the same options, and some different ones. This time the stretch to fit is going in the other way and the image is growing to fit the target region creating. Previously we lost information in the translation. Losing information in working with images is not so bad because you can keep the best information. Creating new information which happens when you grow or stretch the image is bad because you have to interpolate or guess using some functional methods. The chances of guessing wrong is pretty high. Thankfully some techniques exist to fix this problem. In addition to stretch to fit the center option comes back. Now the image really is centered with a border, often called a bezel. The aspect ratio fit also works well.

Time for some math though.

Stretch To Fit

float widthRatio = targetWidth / imageWidth;
float heightRatio = targetWidth / imageWidth;

// Whether growing or shrinking, the ratio will send source metric
// to the target metric through multiplication
targetWidth == widthRatio * imageWidth;

Aspect Ratio Fit

float optimalRatio = Math.Min(widthRatio, heightRatio);

// Taking the smallest of the two ratios we guarantee both
// result metrics are less than or equal to the target metrics
targetWidth >= optimalRatio * imageWidth;
targetHeight >= optimalRatio * imageHeight;

// Normally you center aspect ratio fitted contents. We'll
// see the math for that in the Center section

Center

int left = (int) ((targetWidth - computedWidth) / 2);
int top = (int) ((targetHeight - computedHeight) / 2);

Now that you are introduce to a few of the options, let's check out some of the derivations. First, the ratio that you are using to multiply the source to the target is called the zoom factor. The zoom factor is often a useful display to the user telling them how accurate the display they are seeing is to the original image. If an image is scaled up to 2x or 200% it's normal size then the user might just think the image is bad, but knowing there is a zoom factor the user can quickly determine the display is not the same as the original.

Zoom Factor

int zoomPercentage = (int) (optimalRatio * 100); // 1.0 would display as 100, .50 would display as 50

One of the most useful display modes is the aspect ratio fit. When images are larger than the target you almost always want to use this method when shrinking them down to ensure the final image that you see is a good representative of the original image. When the images are smaller than the target, even this method creates anti-aliasing or growing distortion even though the aspect ratio is still maintained. Instead what you want is to clamp the aspect ratio fit so that the image will never grow.

Clamped Aspect Ratio Fit

// We've previously computed the optimalRatio, now we perform the clamp operation
optimalRatio = Math.Min(optimalRatio, 1.0f); // MAke sure we don't display the image larger than it was

Clamped Aspect Ratio Fit and Center

Rectangle targetRect = new Rectangle(
(targetWidth - (optimalRatio * imageWidth)) / 2,
(targetHeight - (optimalRatio * imageHeight)) / 2,
optimalRatio * imageWidth,
optimalRatio * imageHeight);

There are many more opportunities for mathematics in image layout. This article only covers some of the basics. One of the more interesting problems is selection rectangles over a zoomed image. You have to convert the region on the screen into an actual region back in the original image. The aspect ratios or zoom factors can be used to perform these conversions. The same applies if you are growing an image and have to update the scrollbars to reflect scrolling the new viewport region. I can probably package up some of this code if people are interested even though the PictureBox in Whidbey has support for most of these features. If you intercept the Image being set on the PictureBox you can dynamically change the settings in order to support all of the features described above.

Published Sunday, August 15, 2004 4:45 AM by Justin Rogers
Filed under: , ,

Sunday, August 15, 2004 7:05 PM by Darren Neimke

# re: Math Installment #1: Image layout logic

Nice article Justin... thanks for that!
Monday, August 16, 2004 4:17 AM by Peter Jausovec

# re: Math Installment #1: Image layout logic

Great post. I am looking forward to the next one.
Tuesday, August 24, 2004 8:21 AM by TrackBack

# Math Installments...

...by Justin Rogers. For your browsing convenience, here are links to the first four installments: Math Installment #4: Bounding Regions Math Installment #3: A quick look at wavy text Math Installment #2: I needed some circular oriented text Math Installment...
Tuesday, September 07, 2004 8:09 PM by TrackBack

# Now THIS is blogging...

Monday, September 13, 2004 6:35 PM by DarthPedro

# re: Math Installment #1: Image layout logic

This is definitely a cool series of posts.
Friday, December 26, 2008 4:38 AM by elexx-cq

# re: Math Installment #1: Image layout logic

<a href= membres.lycos.fr/dertull >zx10r graphics</a>

Saturday, February 28, 2009 9:50 PM by Olgunka-oj

# re: Math Installment #1: Image layout logic

Monday, August 27, 2012 5:43 PM by burberry online sale

# re: Math Installment #1: Image layout logic

view <a href="www.burberryoutlettt.com/">burberry outlet</a>  online

burberryoutlettt822

Thursday, September 13, 2012 5:52 AM by battWaype

# re: Math Installment #1: Image layout logic

The decision for Bernard Asnault along with LVMH is involving surmountable significance  for your brand containing annually earnings that has reached over 30 billion kilos.

Thursday, November 01, 2012 5:46 PM by SCEQUIFS

# re: Math Installment #1: Image layout logic

you must read www.birkin-bag-hermes.org - hermes birkin bags for sale online

Friday, November 02, 2012 2:12 AM by SCEQUIFS

# re: Math Installment #1: Image layout logic

look at www.birkin-bag-hermes.org - hermes bag birkin  to take huge discount

Friday, November 02, 2012 11:13 PM by wrilieks

# re: Math Installment #1: Image layout logic

you must read www.authentic-guccipurses.com - gucci authentic bags for more detail

Saturday, November 03, 2012 11:56 AM by wrilieks

# re: Math Installment #1: Image layout logic

buy best www.authentic-guccipurses.com - authentic gucci bags for more detail

Monday, December 03, 2012 5:13 PM by Phetegor

# re: Math Installment #1: Image layout logic

check http://www.portablev.com/ - chanel bags with confident

Monday, December 03, 2012 6:55 PM by lanoLiff

# re: Math Installment #1: Image layout logic

you definitely love http://www.portablev.com/ - chanel bags for gift

Friday, December 07, 2012 4:47 AM by Phetegor

# re: Math Installment #1: Image layout logic

you love this?  http://www.portablev.com/ - chanel bags  for promotion code

Friday, December 07, 2012 6:04 AM by lanoLiff

# re: Math Installment #1: Image layout logic

you love this?  http://www.portablev.com/ - coco chanel bags  to get new coupon