How to Correctly Zoom and Translate an Image from a Mouse Location?

Zooming and Translating an Image from Mouse Location

In this scenario, the image "jumps" and fails to scale from the relocated origin because the translation from the mouse location to the center of the image is not properly calculated. Also, the translation after scaling the image does not take into account the scaled image size, resulting in incorrect results.

To solve this issue, the transformation sequence should be as follows:

1. Translate to (0, 0): Move the image to the origin, so you can apply transformations from there.
2. Scale the image: Apply the zoom factor at (0, 0).
3. Translate back to mouse location: Add the mouse location back to where the image center should be.

Here's a sample implementation:

private void pnl1_Paint(object sender, PaintEventArgs e)
{
    // Translate to (0, 0)
    e.Graphics.TranslateTransform(-img.Width / 2, -img.Height / 2);

    // Scale the image
    e.Graphics.ScaleTransform(zoom, zoom);

    // Translate back to mouse location
    e.Graphics.TranslateTransform(mouse.X, mouse.Y);

    // Draw the image at the new location
    e.Graphics.DrawImage(img, 0, 0);
}

The above is the detailed content of How to Correctly Zoom and Translate an Image from a Mouse Location?. For more information, please follow other related articles on the PHP Chinese website!