How do I implement a zoom in feature for my GUI?

Question

I have a simple GUI which displays 4 shapes and when you click inside the shape it changes colour. I now need to implement a zoom in feature which will when the user click drags the mouse it will zoom in on the dragged area (it will be a rectangle) in a new window. Here is my GUI class:

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.MouseInfo;
import java.awt.Point;
import java.awt.RenderingHints;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.util.Random;

import javax.swing.*;

@SuppressWarnings("serial")
public class taskTwo2 extends JPanel {
    private static final int PREF_W = 200;
    private static final int PREF_H = PREF_W;
    private Color circleColor = Color.RED;   //starting colour
    private Color circleColor2 = Color.BLUE;
    private Color squareColor = Color.GREEN;
    private Color squareColor2 = Color.YELLOW;
    private int circX  = 10;
    private int circY = circX;
    private int circW = PREF_W - 2 * circX;
    private int circH = PREF_H - 2 * circY;

    public taskTwo2() {
        addMouseListener(new MyMouse()); //mouse click listener
    }

    protected void paintComponent(Graphics g) {
        super.paintComponent(g);

        // to smooth out graphics
        Graphics2D g2 = (Graphics2D) g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); //smoothes out edges

        g2.setColor(circleColor);
        g2.fillOval(circX, circY, circW, circH);
        g2.setColor(Color.BLACK);
        g2.drawOval(circX, circY, circW, circH);


        g2.setColor(circleColor2);
        g2.fillOval(25*(circX), 25*(circY), circW, circH);
        g2.setColor(Color.BLACK);
        g2.drawOval(25*(circX), 25*(circY), circW, circH);


        g2.setColor(squareColor);
        g2.fillRect(circX, 25*(circY), circW, circH);
        g2.setColor(Color.BLACK);
        g2.drawRect(circX, 25*(circY), circW, circH);


        g2.setColor(squareColor2);
        g2.fillRect(25*(circX), circY, circW, circH);
        g2.setColor(Color.BLACK);
        g2.drawRect(25*(circX), circY, circW, circH);
    }

    public Dimension getPreferredSize() {
        if (isPreferredSizeSet()) {
            return super.getPreferredSize();
        }
        return new Dimension(PREF_W, PREF_H);
    }

    public static boolean isInCircle(Point mouseLocation, double cX, double cY, double cR){
        final double dX = mouseLocation.getX()-cX;
        final double dY = mouseLocation.getY()-cY;
        return Math.sqrt(dX*dX+dY*dY)<=cR;     //Euclidean distance
    }

    private class MyMouse extends MouseAdapter {
        Random rand = new Random();

        @Override
        public void mousePressed(MouseEvent e) {

            Point mouseLocation = e.getPoint(); //return mouse click position

            if(isInCircle(mouseLocation,circX+circW/2,circY+circH/2,circW/2)){
                float red = rand.nextFloat();       //generates a random value for the red tint value
                float green = rand.nextFloat();
                float blue = rand.nextFloat();
                circleColor = new Color(red, green, blue); //new colour for first circle
            }

            if(isInCircle(mouseLocation,25*(circX)+circW/2,25*(circY)+circH/2,circW/2)){
                float red = rand.nextFloat();       
                float green = rand.nextFloat();
                float blue = rand.nextFloat();
                circleColor2 = new Color(red, green, blue);
            }

            if(isInCircle(mouseLocation,circX+circW/2,25*(circY)+circH/2,circW/2)){
                float red = rand.nextFloat();       
                float green = rand.nextFloat();
                float blue = rand.nextFloat();
                squareColor = new Color(red, green, blue);
            }

            if(isInCircle(mouseLocation,25*(circX)+circW/2,circY+circH/2,circW/2)){
                float red = rand.nextFloat();       
                float green = rand.nextFloat();
                float blue = rand.nextFloat();
                squareColor2 = new Color(red, green, blue);
            }

            repaint();   //repaint components
        }
    }

    private static void createAndShowGui() { //code for GUI visuals
        JFrame frame = new JFrame("MyTaskToo");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(new taskTwo2());
        frame.setSize(500, 500);
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGui();
            }
        });
    }
}

There are any number of ways you can do this, depending on the functionality you want to achieve. You could simply scale the `Graphics` context accordingly, you could apply a scale factor to all your coordinates or you could use a `J/JXLayer` — MadProgrammer, Mar 17 '16 at 00:09
For [example](http://stackoverflow.com/questions/18158550/zoom-box-for-area-around-mouse-location-on-screen/18158845#18158845), [example](http://stackoverflow.com/questions/19643637/zoom-using-mouse-and-graphics/19646246#19646246), [example](http://stackoverflow.com/questions/30792089/java-graphics2d-translate-and-scale/30794625#30794625), [example](http://stackoverflow.com/questions/21174997/how-to-add-mouselistener-to-item-on-java-swing-canvas/21175125#21175125) — MadProgrammer, Mar 17 '16 at 00:14

How do I implement a zoom in feature for my GUI?

0 Answers0