Zooming and panning large images

[Guest]

Hi there,
I am currently writing an application where one inspects images and
annotates certain features. Thus, one has to zoom in (4x) and pan around. The
features are marked with little red rectangles.The images are 2048x2048
pixels.

It seems that I can find no efficient way to implement both zooming and
panning.

At present I have a panel with autoscroll set to true inside which there is
a pictureBox in which I can draw both the images and the rectangles. This
allows me to efficiently pan the image. However, zooming is a pain:
Displaying a 2048x2048 image at four times its size is fun to pan, but
getting it to display in the first place takes forever. I assume this is
because it needs to first transfer all the data to the graphics card which is
slow.

Previously I had done it a different way: I hod no panel but only a
pictureBox. In that I drew whichever portion of the image I displayed. This
made zooming in quite fast but panning was a pain because again it had to
transfer that portion to the graphics card each time the image moved.

Does anybody have a better idea how this can be done?

Thanks in advance for any help you can offer!

Regards,
Marcus

 

[Guest]

Hi there,
I am currently writing an application where one inspects images and
annotates certain features. Thus, one has to zoom in (4x) and pan around. The
features are marked with little red rectangles.The images are 2048x2048
pixels.

It seems that I can find no efficient way to implement both zooming and
panning.

At present I have a panel with autoscroll set to true inside which there is
a pictureBox in which I can draw both the images and the rectangles. This
allows me to efficiently pan the image. However, zooming is a pain:
Displaying a 2048x2048 image at four times its size is fun to pan, but
getting it to display in the first place takes forever. I assume this is
because it needs to first transfer all the data to the graphics card which is
slow.

No, the entire image is not transfered to the graphics card. I doubt
that you even have a graphics card with that much memory.

I don't know exactly how you accomplish the zooming, but what probably
takes time is to create a working copy of the image in memory. If you
zoom a 2048x2048 image to four times, you get a 8192x8192 image, which
uses 192 MB of memory.

Previously I had done it a different way: I hod no panel but only a
pictureBox. In that I drew whichever portion of the image I displayed. This
made zooming in quite fast but panning was a pain because again it had to
transfer that portion to the graphics card each time the image moved.

Well, the image that is drawn is transferred to the graphics part, but
that is not a problem. That is done whenever any image is drawn. The
problem is the extra step between the image and the actual drawing to
the screen, as you are drawing on an image in a PictureBox, then that
image is drawn on the screen. I hope that you at least reused the image
in the PictureBox, and not just created a new image object for every
update...

Does anybody have a better idea how this can be done?

You can for example skip the PictureBox entirely. Override the Paint
event in the panel, and draw the portion of the image that should be
displayed. That way there is no huge working copy of the image, and
there is no extra step between the image and the drawing.

 

[Guest]

Hi Göran,

thanks for your quick reply!

No, the entire image is not transfered to the graphics card. I doubt
that you even have a graphics card with that much memory.

How does the panel control accomplish the scrolling so fast? It does take
forever for the image to display but once it is there I can scroll around and
pan with practically no visible delay. I would have thought this is only
possible if the image is on the graphics card and is moved there.

I don't know exactly how you accomplish the zooming, but what probably
takes time is to create a working copy of the image in memory. If you
zoom a 2048x2048 image to four times, you get a 8192x8192 image, which
uses 192 MB of memory.

That's pretty much right. What I do when I zoom in is to create a bitmap of
the right size, i.e. 8192x8192, then create a Graphics object from it and
then first draw the image and then the annotations. Then I assign the bitmap
to the picturebox which is set to AutoSize. The advantage of this is that the
panel control takes care of all the scrolling. It just takes loads of memory
and time.

Well, the image that is drawn is transferred to the graphics part, but
that is not a problem. That is done whenever any image is drawn. The
problem is the extra step between the image and the actual drawing to
the screen, as you are drawing on an image in a PictureBox, then that
image is drawn on the screen. I hope that you at least reused the image
in the PictureBox, and not just created a new image object for every
update...

Well the bitmap and the graphics object remained but I had to do a DrawImage
everytime I panned the image. Basically I gave a source and a destination
rectangle. Panning was done by moving the source rectangle and zooming by
making them different sizes. Then after drawing the image and the annotations
I assigned the Bitmap to the pictureBox.Image.

You can for example skip the PictureBox entirely. Override the Paint
event in the panel, and draw the portion of the image that should be
displayed.

Hm, I have never tried overriding a Paint event but I could give it a try.
Are there any snags I should look out for?

Thanks for your help!

Regards,
Marcus

 

[Guest]

Hm, I have never tried overriding a Paint event but I could give it a try.
Are there any snags I should look out for?

Sorry for following up to my own post but I have an additional question: If
I override the Paint event of the control in which I display the image with
the annotations what is the advantage of using a Panel control over using a
PictureBox control? If I use the Panel control I assume I do not get
scrolling for free, right?

Regards,
Marcus

 

[Guest]

Hi Göran,

You can for example skip the PictureBox entirely. Override the Paint
event in the panel, and draw the portion of the image that should be
displayed. That way there is no huge working copy of the image, and
there is no extra step between the image and the drawing.

I just wanted to say that your assessment of the situation was spot on. I
tried what you suggested and it works beautifully! It was actually quite easy
too, I don't know why I haven't done it before!

Thank you very much!

Best regards,
Marcus