Scale around a point

I am trying to create an image editing application for the purpose of generating UV maps in my own format. I am currently working on scaling the image for the purpose of zooming. I can get the image to zoom correctly, but it always zooms around the center of the image. I would like to scale around the mouse instead.

My Question

How can I scale a rectangle(image) around a point(the mouse)?

My Variables

float X = imgX;
float Y = imgY;
float W = imgWidth;
float H = imgHeight;
float mX = mouseX;
float mY = mouseY;


My Code

function scale(float ratio){
W += ratio;
H += ratio;
X -= ratio/2;
Y -= ratio/2;
}


To Clarify

I am not trying to change camera or view-port. I am trying to scale an BufferedImage through the Graphics.drawImage() function. The function take the image and the x, y, width, and height of the image to be rendered.

Example In the Windows Photo Viewer, when you zoom in using mouse scroll, the image is zoomed around the mouse.

• @TheHarrisonCrafter Yep OK, but read this answer carefully again. The linear transformation of scaling is defined relative to the origin. You need to combine them to scale around a point. You can also translate an image, but that's a different transformation. Some high-level graphics APIs expose a scale method which can optionally take a point too, but all that's really doing internally is applying an additional translate-operation.