Problem with zoom function

[Veronique Kus]

Hi,
I'm trying to implement a zoom function for my application. I use a JComboBox in which the user sets the desired scaling. Before the drawing canvas is (re)painted in its paintComponent() function, i set the scale of the Graphics2D object to the scale set by the user (line 91 in the code below). Everything is drawn according to the scale so this works fine. However, my problem is that the mouse listener gets messed up when the scale is changed. For example, if I set scale to 200%, a mouse click which would normally be interpreted as hapenning at point (100, 100) is now taken to happen at (200, 200)ar.

The below code is a small program which illustrates my problem.

package code_tests;

/*
 * This code is based on an example provided by John Vella,
 * a tutorial reader.
 */

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.util.*;

/* ScrollDemo2.java requires no other files. */
public class ScrollDemo2 extends JPanel
                         implements MouseListener {
    private Dimension area; //indicates area taken up by graphics
    private Vector<Rectangle> circles; //coordinates used to draw graphics
    private JPanel drawingPane;
    private double zoomScale = 1;

    private final Color colors[] = {
        Color.red, Color.blue, Color.green, Color.orange,
        Color.cyan, Color.magenta, Color.darkGray, Color.yellow};
    private final int color_n = colors.length;

    public ScrollDemo2() {
        super(new BorderLayout());

        area = new Dimension(0,0);
        circles = new Vector<Rectangle>();


    	String[] zoomValues = new String[] {"25%", "50%", "100%", "200%", "400%"};
        final JComboBox zoomCombo = new JComboBox(zoomValues);
        zoomCombo.setEditable(true);
    	zoomCombo.setPrototypeDisplayValue("XXX");
        zoomCombo.setMaximumSize(new Dimension(40, 30));
    	zoomCombo.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
            	String zoom = (String) zoomCombo.getSelectedItem();
            	String trimmedString;
            	if(zoom.contains("%")){
            		int l = zoom.indexOf("%");
            		trimmedString = zoom.substring(0, l);
            	}else{
            		trimmedString = zoom;
            	}
            	
        		int value = 0;
        		try{
        			value = Integer.parseInt(trimmedString);
        			zoom(value);
        		}catch(NumberFormatException ex){
        			JOptionPane.showMessageDialog(null, 
        					"Incorrect value in zoom box", 
        					"Zoom error", 
        					JOptionPane.ERROR_MESSAGE);
        		}
            }
        });

        //Set up the drawing area.
        drawingPane = new DrawingPane();
        drawingPane.setBackground(Color.white);
        drawingPane.addMouseListener(this);

        //Put the drawing area in a scroll pane.
        JScrollPane scroller = new JScrollPane(drawingPane);
        scroller.setPreferredSize(new Dimension(500,500));

        //Lay out this demo.
        add(zoomCombo, BorderLayout.PAGE_START);
        add(scroller, BorderLayout.CENTER);
    }

    public void zoom(int n){
		double scale = (double)n/100;
		System.out.println("raction: " + scale);
		if(scale > 0){
			zoomScale = scale;	
		}
		System.out.println("Zoom: " + zoomScale);
		repaint();
	}
    
    /** The component inside the scroll pane. */
    public class DrawingPane extends JPanel {
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            Graphics2D g2 = (Graphics2D) g;
            g2.scale(zoomScale, zoomScale);
            
            Rectangle rect;
            for (int i = 0; i < circles.size(); i++) {
                rect = circles.elementAt(i);
                g2.setColor(colors[(i % color_n)]);
                g2.fillOval(rect.x, rect.y, rect.width, rect.height);
            }
        }
    }

    //Handle mouse events.
    public void mouseReleased(MouseEvent e) {
        final int W = 100;
        final int H = 100;
        boolean changed = false;
        if (SwingUtilities.isRightMouseButton(e)) {
            //This will clear the graphic objects.
            circles.removeAllElements();
            area.width=0;
            area.height=0;
            changed = true;
        } else {
            int x = e.getX() - W/2;
            int y = e.getY() - H/2;
            if (x < 0) x = 0;
            if (y < 0) y = 0;
            Rectangle rect = new Rectangle(x, y, W, H);
            circles.addElement(rect);
            drawingPane.scrollRectToVisible(rect);

            int this_width = (x + W + 2);
            if (this_width > area.width) {
                area.width = this_width; changed=true;
            }

            int this_height = (y + H + 2);
            if (this_height > area.height) {
                area.height = this_height; changed=true;
            }
        }
        if (changed) {
            drawingPane.setPreferredSize(area);
            drawingPane.revalidate();
        }
        drawingPane.repaint();
    }
    public void mouseClicked(MouseEvent e){}
    public void mouseEntered(MouseEvent e){}
    public void mouseExited(MouseEvent e){}
    public void mousePressed(MouseEvent e){}

    /**
     * Create the GUI and show it.  For thread safety,
     * this method should be invoked from the
     * event-dispatching thread.
     */
    private static void createAndShowGUI() {
        //Create and set up the window.
        JFrame frame = new JFrame("ScrollDemo2");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        //Create and set up the content pane.
        JComponent newContentPane = new ScrollDemo2();
        newContentPane.setOpaque(true); //content panes must be opaque
        frame.setContentPane(newContentPane);

        //Display the window.
        frame.pack();
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        //Schedule a job for the event-dispatching thread:
        //creating and showing this application's GUI.
        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGUI();
            }
        });
    }
}   
 

I tried setting the scale of the Graphics2D object back to 1 at the end of paintComponent function but it did not change anything. I would be really grateful for suggestions from solution(s) to my problem. Maybe I'm even approaching this problem in a completely wrong way and I shouldn't use the scaling to implement the zoom???

[Campbell Ritchie]

Have you tried the AffineTransform class?
If you use transforms, however, it may be a good idea to duplicate the Graphics object; there is a method in Graphics which I think is called create() which does that. The reason is to avoid tiny floating-point errors from accumulating. I have only had that problem with shearing transforms before, but I wouldn't take any chances.

[Veronique Kus]

Yes, I tried AffineTransform but the result is the same :-(

Any other suggestions from anyone? If not solution to this particular obstacle, mayb someone has a proposition of a different implementation of the zoom tool?

[Ernest Friedman-Hill]

Veronique --

You need to apply the zoomScale to the mouse click coordinates before using them. If zoomScale is 2, then if you have a circle at 100, 100, you draw it at the screen coordinates 200, 200, right? Now, the question is, if you click at 200, 200, where do you want the circle to go? You want it to appear right where you clicked. What coordinates would a circle need to appear at screen coordinates 200, 200? That's right: 100, 100. Therefore you need to divide your mouse coordinates by the zoom factor before using them:

 } else {  
             int x = (int) ((e.getX() / zoomScale) - W/2);
             int y = (int) ((e.getY() / zoomScale) - H/2);

[Veronique Kus]

Thanks.

[Ben Wood]

Hi Veronique,

I work a lot with scaling 2D graphics in this way and I often handle the zooming myself, rather than use scaling. What I mean is that I transform the drawing coordinates of the various shapes "manually", rather than scaling the Graphics context.

I generally do this by multiplying or adding to the raw shape coordinates at the time they are drawn. This also enables me to handle panning/dragging as well as zoom.

The reason that I do this is because scaling affects the appearance of the shapes. For example, if you add these two lines to the end of your paintComponent() method:

  
Line2D.Float line = new Line2D.Float(50, 50, 200, 200);
g2.draw(line);
 

you will see that the line thickness changes according to the zoom level. Maybe this is not a problem for your application, but for me the lines etc must always be the same thickness on the screen, regardless of the zoom setting.

Ben

[Sumeda Viduranga]

Ernest Friedman-Hill wrote:Veronique --

You need to apply the zoomScale to the mouse click coordinates before using them. If zoomScale is 2, then if you have a circle at 100, 100, you draw it at the screen coordinates 200, 200, right? Now, the question is, if you click at 200, 200, where do you want the circle to go? You want it to appear right where you clicked. What coordinates would a circle need to appear at screen coordinates 200, 200? That's right: 100, 100. Therefore you need to divide your mouse coordinates by the zoom factor before using them:

 } else {  
             int x = (int) ((e.getX() / zoomScale) - W/2);
             int y = (int) ((e.getY() / zoomScale) - H/2);

this works for me Thanks

[Campbell Ritchie]

Shows that old threads can be useful
And welcome to the Ranch

[Piet Souris]

Well, I do not consider the given solution a nice one.

Much safer would be to save the current transform, and after
receiving a mouse click, translate the mouse coordinates
to the user coordinates with the help of this saved transform.
See the API for a useful method to do that.

Greetz,
Piet

edit: I just realized that I did not give this topic a thorough read.
So my reply may be completely irrelevant! If so, ignore it.