Auto sizing zoom on an image in .NET

Question

I'm considering a personal learning project. Using .NET(preferably VB) I want to build a simple desktop app that's only function is to display comics, like CDisplay, but with more advanced navigation. I want to be able zoom in by clicking on certain areas of an image, individual panels for instance, and have the zoom area automatically snap to the panel and blow it up. The images are usually in a standard format like .jpeg, .png, etc..

Something like this is what I'm going for: http://iphonecomicbookreader.com/

I'm not even sure what this is called? Image mapping? Tone mapping maybe? Is it possible to do this within .NET or would it require some kind of outside library? Code samples would be nice, but obviously this is pretty vague request. Just being pointed in the right direction would be really helpful.

Thanks

Answer 1

You can do this entirely in .Net. Here is an excellent overview of the subject:

http://www.codeproject.com/KB/books/1861004990.aspx

It's C#, but it's really not hard to translate this stuff into VB. In both languages, it's just a matter of creating objects and setting properties and so on.

Essentially you load the original image into a Bitmap object (using built-in methods). When you want to zoom in on something, you define a Rectangle object that describes the region you want to zoom to, then use the DrawImage method of your Graphics object to copy and resize that region into a new Bitmap, which you then display however you like. The code example shows how to use all of these methods.

The only relatively difficult part of this would be to automatically determine the boundaries of each panel. This could be especially difficult if some of the panels are irregularly shaped (like Family Circus, as if anybody reads that), or if the scan of the comic is not perfectly aligned. It might be better to include comics with your application that contain the original image along with Regions that you've pre-defined that describe the boundaries of the panels.

If you run into any problems using the samples, post another question here and I (and 1000s of others) will be happy to help.

Update: here's a sample app I wrote that shows basically how to do this with .Net. Run the program, then click on each of the panels in the cartoon, and a zoomed-in image of each panel will be displayed below. I'll post the code for it in a second.

Update 2: here's the source code.

Update 3: and here's the original comic in context. Consider this my homage to Jeff Atwood. :)