Moving canvas or panel over image

Question

Hello!
Let's say I have a class that extends from panel, and in the paint method i draw an image on the panel. Now I need another object, transparent, but with some graphics on it, let's say a canvas, or another panel, with a rounded rectangle drawn inside, but otherwise transparent. Now I want to move that other canvas on the original panel panel, and i want original image to be seen where the canvas is transparent. How can I do this? How can I make such a canvas and add it to the panel?

Answer 1

import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import java.io.*;
import java.net.*;
import javax.imageio.ImageIO;
import javax.swing.*;
import javax.swing.event.MouseInputAdapter;
public class OverlayTest extends JPanel
    BufferedImage image;
    public OverlayTest()
        loadImage();
    protected void paintComponent(Graphics g)
        super.paintComponent(g);
        int w = getWidth();
        int h = getHeight();
        int imageWidth = image.getWidth();
        int imageHeight = image.getHeight();
        int x = (w - imageWidth)/2;
        int y = (h - imageHeight)/2;
        g.drawImage(image, x, y, this);
    private void loadImage()
        String fileName = "images/redfox.jpg";
        try
            URL url = getClass().getResource(fileName);
            image = ImageIO.read(url);
        catch(MalformedURLException mue)
            System.err.println("url: " + mue.getMessage());
        catch(IOException ioe)
            System.err.println("read: " + ioe.getMessage());
    public static void main(String[] args)
        JPanel panel = new JPanel();
        OverlayLayout overlay = new OverlayLayout(panel);
        panel.setLayout(overlay);
        panel.add(new TopPanel());
        panel.add(new OverlayTest());
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.add(panel);
        f.setSize(400,400);
        f.setLocation(200,200);
        f.setVisible(true);
class TopPanel extends JPanel
    Point loc;
    int width, height, arcRadius;
    Rectangle r;       // for mouse ops in TopRanger
    public TopPanel()
        setOpaque(false);
        width = 300;
        height = 240;
        arcRadius = 35;
        r = new Rectangle(width, height);
        TopRanger ranger = new TopRanger(this);
        addMouseListener(ranger);
        addMouseMotionListener(ranger);
    protected void paintComponent(Graphics g)
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
        if(loc == null)
            init();
        g2.setPaint(Color.red);
        g2.drawRoundRect(loc.x, loc.y, width, height, arcRadius, arcRadius);
    private void init()
        int w = getWidth();
        int h = getHeight();
        loc = new Point();
        loc.x = (w - width)/2;
        loc.y = (h - height)/2;
        r.x = loc.x;
        r.y = loc.y;
class TopRanger extends MouseInputAdapter
    TopPanel top;
    Point offset;
    boolean dragging;
    public TopRanger(TopPanel top)
        this.top = top;
        offset = new Point();
        dragging = false;
    public void mousePressed(MouseEvent e)
        Point p = e.getPoint();
        if(top.r.contains(p))
            offset.x = p.x - top.r.x;
            offset.y = p.y - top.r.y;
            dragging = true;
    public void mouseReleased(MouseEvent e)
        dragging = false;
        // update top.r
        top.r.x = top.loc.x;
        top.r.y = top.loc.y;
    public void mouseDragged(MouseEvent e)
        if(dragging)
            top.loc.x = e.getX() - offset.x;
            top.loc.y = e.getY() - offset.y;
            top.repaint();
}