Question

I have made a program that reads voltage and current values of some diode curves from an xml file and draws them on screen (Just using plain 2D graphics and some simple commands like DrawCurve and stuff like that).

My main image frame is 800 by 800 pixels (you can see a smaller screenshot down below). Now I want to add a zoom function that when I hover the mouse over this image area, a flying smaller square pops up and zooms in + moves when I move the mouse over this area.

I have no idea how to approach this. Ofcourse I don’t ask the full working code but please help me to get closer and closer!

For instance, can I make the zoom to work, without reading the curve data and painting real time? or there is no escape from it? How can I have a hovering image box when I move mouse over the orginal image?

Thanks!

Answer 1

Have you timed how long DrawCurve takes? Perhaps it’s fast enough to do in real time. Don’t forget, the GDI will clip the drawing primitives to the drawing area. You just need to set up a clipping rectangle as you move the mouse around.

To speed up the redraw, create the main window image (the one you pasted) as an off-screen bitmap, and just DrawImage the off-screen version to the window in the paint events. That way you reduce the impact of the DrawCurve.

Finally, to get good looking results, overload the OnPaintBackground (can’t remember the name exactly but it’s something like that) so it does nothing (not even call the base class) and do all your painting in the OnPaint method using a BufferedGraphics object.

Update

Your paint function might look like this:

OnPaint (...)
{
  the_graphics_object.DrawImage (the background image);
  the_graphics_object.Clip = new Region (new Rectangle (coords relative to mouse position));
  the_graphics_object.TranslateTransform (drawing offset based on mouse position);
  RenderScene (the_graphics_object, scale_factor); // draws grid and curve, etc
  the_graphics_object.DrawRectangle (zoom view rectangle); // draw a frame around the zoomed view
}

This will produce a floating ‘window’ relative to the mouse position.