title: How to determine the original coordinate using the mouse coordinate, the translation and the zoom scale?
body: <p>I will ask for this problem without a specific programming language.</p>
  
  <p>I have got a canvas control with the hability to do zoom and translating the view (dragging). I have loaded an image on the canvas and my objetive is to obtain the coordinate when I click the mouse on the canvas.</p>
  
  <p>The event when I click on the canvas gives me the coordinate of the mouse (mouse_x,mouse_y), the translate measure (delta_x, delta_y) and the zoom (1.0 means no zoom, x > 1.0 more zoom, x &lt; 1.0 less zoom).</p>
  
  <p>When I click on the canvas without move the image and do zoom, the image coordinates is the same of the mouse coordinates. OK.</p>
  
  <pre><code>real_x = mouse_x;
  
  real_y = mouse_y;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Ak3kq.png" alt="enter image description here"></p>
  
  <p>When I click on the canvas with the image moved but without zoom, the image coordinates is the the mouse coordinates adding the translate measure.</p>
  
  <pre><code>real_x = mouse_x + delta_x;
  
  real_y = mouse_y + delta_y;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/8E6q8.png" alt="enter image description here"></p>
  
  <p>The problem is when I do zoom, I don't know which are the equation to get the original coordinates using the zoom value.</p>
  
  <p><img src="https://i.stack.imgur.com/Y85y7.png" alt="enter image description here"></p>
  
  <p>EDIT:</p>
  
  <p>These 3 solutions do not work.</p>
  
  <p>Code:</p>
  
  <pre><code>     void DrawLineOnDoubleClick(object sender, RoutedEventArgs e)
       {
          var mouse_x = this._mouseDownPos.X;
          var mouse_y = this._mouseDownPos.Y;
  
          var delta_x = this.TranslateX;
          var delta_y = this.TranslateY;
  
          var scale = this.Zoom;
  
          var windowwidth = 1000;
          var windowheight = 500;
  
          // OPTION 1. IT DOES NOT WORK
          var real_x = windowwidth / 2 - (windowwidth / 2 + delta_x) * scale + mouse_x;
          var real_y = windowheight/ 2 - (windowheight/ 2 + delta_y) * scale + mouse_y;
  
          // OPTION 2. IT DOES NOT WORK
          var real_x = windowwidth / 2 - windowwidth / 2 * scale + delta_x * scale + mouse_x;
          var real_y = windowheight / 2 - windowheight / 2 * scale + delta_y * scale + mouse_y;
  
          // OPTION 3. IT DOES NOT WORK
          var real_x = windowwidth / 2 - windowwidth / 2 * scale + delta_x * scale + mouse_x * scale;
          var real_y = windowheight / 2 - windowheight / 2 * scale + delta_y * scale + mouse_y * scale;
  
          // Draw line from last clicked to new clicked position
          ...
     }
  </code></pre>
  
  <p>For example, using solution 2, when I click the first corner of the image to the opposite corner of the image with 0.4 of scale (zoom), the line is drawn far of the mouse position (when I do the same without scale (1.0) and without translation (dragging) the lines is drawn properly.</p>
  
  <p><img src="https://i.stack.imgur.com/NQAtA.png" alt="enter image description here"></p>