title: How to perform smooth image zoom and pan?
body: <p>I am writing a program that displays a map, and on top of it another layer where position of cameras and their viewing direction is shown. The map itself can be zoomed and panned. The problem is that the map files are of significant size and zooming does not go smoothly. </p>
  
  <p>I created <code>class ZoomablePictureBox : PictureBox</code> to add zooming and panning ability. I tried different methods, from this and other forums, for zooming and panning and ended up with the following, firing on the <code>OnPaint</code> event of <code>ZoomablePictureBox</code>:</p>
  
  <pre><code>  private void DrawImgZoomed(PaintEventArgs e)
      {
          e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
  
              if (imgZoomed != null)
                  e.Graphics.DrawImage(imgZoomed, new Rectangle(-ShiftX, -ShiftY, imgZoomed.Width, imgZoomed.Height), 0, 0, imgZoomed.Width, imgZoomed.Height, GraphicsUnit.Pixel);
  
      }
  </code></pre>
  
  <p>Where ShiftX and ShiftY provide proper map panning (calculation irrelevant for this problem).</p>
  
  <p><code>imgZoomed</code> is zoomed version of original map calculated in BackgroundWorker everytime the zoom changes:</p>
  
  <pre><code>private void bgWorker_DoWork(object sender, DoWorkEventArgs e)
      {
  
          Bitmap workerImage = e.Argument as Bitmap;
          Bitmap result;
  
          result = new Bitmap(workerImage, new Size((int)(workerImage.Width * Zoom), (int)(workerImage.Height * Zoom)));
  
          e.Result = result;
      }
  </code></pre>
  
  <p>So current approach is, that everytime user scrolls mousewheel, the new <code>imgZoomed</code> is calculated based on current Zoom. With map size of ~30 MB this can take up to 0,5 second which is annoying, but panning runs smoothly.</p>
  
  <p>I realize that this may not be the best idea. In previous approach i did not create zoomed image copy everytime mouse is scrolled but did this instead:</p>
  
  <pre><code>e.Graphics.DrawImage(Image, new Rectangle(-ShiftX, -ShiftY, (int)(this._image.Width * Zoom), (int)(this._image.Height * Zoom)), 0, 0, Image.Width, Image.Height, GraphicsUnit.Pixel);
  </code></pre>
  
  <p>Zoom was much smoother, because from what i understand, it just stretched original image. On the other hand panning was skipping heavily.</p>
  
  <p>I wast thinking of:</p>
  
  <ul>
  <li>creating copies of orignial map for each zoom in memory/on hard drive - it will take up too much memory/hdd space</li>
  <li>creating copies of orignial map for next/actual/previous zooms so i
  have more time to calculate next step - it will not help if user
  scrolls more than one step at a time</li>
  </ul>
  
  <p>I also tried matrix transformations - no real performance gain, and calculating pan was a real pain in the arse.</p>
  
  <p>I'm running in circles here and don't know how to do it. If i open the map in default Windows picture viewer zooming and panning is smooth. How do they do that?</p>
  
  <p>In what way do I achieve smooth zooming and panning at the same time?</p>