Monday, April 14, 2008

Deep Zoom - Zooming and centering image to fill the Deep Zoom screen

One of the readers (see comments here) wanted to zoom and center an image from the collection in such a way that it would fill the screen. Here is the code snippet that will fulfill this requirement. I haven't applied this to an example yet, but I will, if there is enough interest.

public void ZoomFullAndCenterImage(int subImageIndex)
{
Rect subImageRect = GetSubImageRect(subImageIndex);
Rect imageRectElement = msiLogicalToElementRect(GetSubImageRect(subImageIndex));

// Calculate the zoom factor such that the image will fill up the entire screen
double zoomFactor = (msi.Width / imageRectElement.Width) < (msi.Height / imageRectElement.Height) ?
msi.Width / imageRectElement.Width : msi.Height / imageRectElement.Height;

// Center the image
DisplaySubImageCentered(subImageIndex);
// Use the mid point of the image to zoom from
msi.ZoomAboutLogicalPoint(zoomFactor, (subImageRect.Left+subImageRect.Right)/2, (subImageRect.Top+subImageRect.Bottom)/2);
}

3 comments:

Anonymous said...

Hey man, thanks for your insights into the Deep Zoom control! Very useful since the docs are non existant yet! ;)

Kristoffer said...

Very interesting! =)

However, I am trying to figure out how to zoom into a specific point in a image. There is no separate images, just one big one.

If you have any idea, it sure would be nice reading about it! =)

Unknown said...

Thanks for the code. Just have tried the same with Silverlight 3 and observed that msi.Width and msi.Height has NaN values. So, if ActualWidth and ActualHeight are used respectively, then it works fine for SL3 also.