JScrollPane - Zoom relative to mouse position

Question

I need to calculate the new position of the viewport when zooming in to an image.

The UI is built up as follows:

• ImagePanel draws the image
• ImagePanelWrapper is a JPanel wrapping around the imagePanel
• JScrollPane contains the ImagePanelWrapper

When zooming in or out, the ImagePanel's zoom factor is changed and the preferred size of the ImagePanel is being recalculated. Therefore the image on this panel moves, even though the ImagePanel stays at the same viewport point.

The following methods are called when the user holds down CTRL and uses the mouse wheel. The given point is the cursor location provided by the MouseWheelListener. With the functionality in these methods the image is already staying at the same top-left-position when zooming in or out.

The problem is that I just cant figure out how to move relative to the mouse, like Paint.NET for example. Any ideas?

/**
 * 
 */
public void zoomOut(Point point) {
    this.imagePanel.setZoom(this.imagePanel.getZoom() * 0.9f);
    Point pos = this.getViewport().getViewPosition();

    int newX = (int) (pos.x * 0.9f);
    int newY = (int) (pos.y * 0.9f);
    this.getViewport().setViewPosition(new Point(newX, newY));

    this.imagePanel.revalidate();
    this.imagePanel.repaint();
}

/**
 * 
 */
public void zoomIn(Point point) {
    this.imagePanel.setZoom(this.imagePanel.getZoom() * 1.1f);
    Point pos = this.getViewport().getViewPosition();

    int newX = (int) (pos.x * 1.1f);
    int newY = (int) (pos.y * 1.1f);
    this.getViewport().setViewPosition(new Point(newX, newY));

    this.imagePanel.revalidate();
    this.imagePanel.repaint();
}

Solution 1

If these assumptions are true:

• The supplied Point is relative to the upper-left corner of the viewport.
• The viewport's dimensions are smaller than the underlying ImagePanel.

Then the viewport can be adjusted so that the cursor is over the same point in the image before and after the zoom operation, if moved in the following manner:

 /**
 * 
 */
public void zoomOut(Point point) {
    this.imagePanel.setZoom(this.imagePanel.getZoom() * 0.9f);
    Point pos = this.getViewport().getViewPosition();

    int newX = (int)(point.x*(0.9f - 1f) + 0.9f*pos.x);
    int newY = (int)(point.y*(0.9f - 1f) + 0.9f*pos.y);
    this.getViewport().setViewPosition(new Point(newX, newY));

    this.imagePanel.revalidate();
    this.imagePanel.repaint();
}

/**
 * 
 */
public void zoomIn(Point point) {
    this.imagePanel.setZoom(this.imagePanel.getZoom() * 1.1f);
    Point pos = this.getViewport().getViewPosition();

    int newX = (int)(point.x*(1.1f - 1f) + 1.1f*pos.x);
    int newY = (int)(point.y*(1.1f - 1f) + 1.1f*pos.y);
    this.getViewport().setViewPosition(new Point(newX, newY));

    this.imagePanel.revalidate();
    this.imagePanel.repaint();
}

Here's the math for completeness' sake:

Solution 2

You should be able to get the location of the mouse pointer using point.x and point.y - refer to the Point documentation here. Accouding to the MouseMotionEvent documentation here, the point.x and point.y are relative to the component under the mouse (the JScrollPane).

You can incorporate these values into your calculation. Is this kinda what you were looking for?

Comments

[bigblind]

I have a similar question. I'm trying to use AffineTransform to do the same thing, and I'm having some trouble applying the math from this question. If you find the time, could you help me out? stackoverflow.com/questions/37509908/zoom-in-at-mouse-cursor

[geowar]

Your "Before Zoom" assumes that the previous zoom is 1.0 (no zoom); What if it's not? IOW: What happens the next time you call this code?