Java swing how to layer custom paintings

Question

BACKGROUND

I'm currently working on a project where I want to be able to draw a triangle, circle and a rectangle on a JPanel and move them around.

When a figure is moved, it should end up "at the top" so that it covers other figures that are in an overlapping position and when a figure is moved, the "top" is selected; if several figures cover the position of the mouse pointer, the top one is selected.

MY PROBLEM

I cannot figure out how to fix the issue of my shapes not ending up on top of each other if I drag them to the same position. They just stay in the same layers and if i stack them all on top of each other I still pick up the rectangle first.

Answer 1

I cannot figure out how to fix the issue of my shapes not ending up on top of each other if I drag them to the same position

Components on a panel are painted based on the components ZOrder. The component with the lowest ZOrder is painted last.

So in the mousePressed metthod of your MouseListener when you select a component to drag you can change its ZOrder:

Component child = e.getComponent();
child.getParent().setComponentZOrder(child, 0);

Edit:

drawRec.paintComponent(g);
drawCirc.paintComponent(g);
drawTri.paintComponent(g);

I didn't notice that code before.

Never invoke paintComponent() directly.

Swing has a parent/child relationship. You just need to add each of the 3 shape panels to the parent panel. The parent panel will then paint the child components based on the ZOrder I described above. Get rid of those 3 lines of code.

Answer 2

I created the following GUI.

I created a Shape class. I used a java.awt.Point to hold the center point and a java.awt.Polygon to hold the actual shape. I was able to use the Polygon contains method to see if I was mouse clicking inside the polygon.

I created a ShapeModel class to hold a java.util.List of Shape instances. Creating the proper application model is so important when creating a Swing GUI.

I created a JFrame and a drawing JPanel. The drawing JPanel draws the List of Shape instances. Period. The MouseAdapter will take care of recalculating the polygon and repainting the JPanel.

The trick is in the MouseAdapter mousePressed method. I delete the selected Shape instance and add the selected Shape instance back to the List. This moves the selected shape to the top of the Z-order.

Here's the complete runnable code. I made all the classes inner classes so I could post this code as one block.

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.Polygon;
import java.awt.RenderingHints;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.util.ArrayList;
import java.util.List;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

public class MoveShapes implements Runnable {

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new MoveShapes());
    }
    
    private final DrawingPanel drawingPanel;
    
    private final ShapeModel shapeModel;
    
    public MoveShapes() {
        this.shapeModel = new ShapeModel();
        this.drawingPanel = new DrawingPanel();
    }

    @Override
    public void run() {
        JFrame frame = new JFrame("Move Shapes");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        
        frame.add(drawingPanel, BorderLayout.CENTER);
        
        frame.pack();
        frame.setLocationByPlatform(true);
        frame.setVisible(true);
    }
    
    public void repaint() {
        drawingPanel.repaint();
    }
    
    public class DrawingPanel extends JPanel {

        private static final long serialVersionUID = 1L;
        
        public DrawingPanel() {
            this.setBackground(Color.WHITE);
            this.setPreferredSize(new Dimension(600, 500));
            MoveListener listener = new MoveListener();
            this.addMouseListener(listener);
            this.addMouseMotionListener(listener);
        }
        
        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            
            Graphics2D g2d = (Graphics2D) g;
            g2d.setRenderingHint(
                    RenderingHints.KEY_ANTIALIASING,
                    RenderingHints.VALUE_ANTIALIAS_ON);
            
            for (Shape shape : shapeModel.getShapes()) {
                g2d.setColor(shape.getColor());
                g2d.fillPolygon(shape.getShape());
            }
            
        }
        
    }
    
    public class MoveListener extends MouseAdapter {
        
        private Point pressedPoint;
        
        private Shape selectedShape;

        @Override
        public void mousePressed(MouseEvent event) {
            this.pressedPoint = event.getPoint();
            this.selectedShape = null;
            
            List<Shape> shapes = shapeModel.getShapes();
            for (int i = shapes.size() - 1; i >= 0; i--) {
                Shape shape = shapes.get(i);
                if (shape.getShape().contains(pressedPoint)) {
                    selectedShape = shape;
                    break;
                }
            }
            
            if (selectedShape != null) {
                shapes.remove(selectedShape);
                shapes.add(selectedShape);
            }
        }
        
        @Override
        public void mouseReleased(MouseEvent event) {
            moveShape(event.getPoint());
        }
        
        @Override
        public void mouseDragged(MouseEvent event) {
            moveShape(event.getPoint());
        }
        
        private void moveShape(Point point) {
            if (selectedShape != null) {
                int x = point.x - pressedPoint.x;
                int y = point.y - pressedPoint.y;
                selectedShape.incrementCenterPoint(x, y);
                drawingPanel.repaint();
                pressedPoint = point;
            }
        }
        
    }
    
    public class ShapeModel {
        
        private final List<Shape> shapes;
        
        public ShapeModel() {
            this.shapes = new ArrayList<>();
            this.shapes.add(new Shape(100, 250, Color.BLUE, ShapeType.TRIANGLE));
            this.shapes.add(new Shape(300, 250, Color.RED, ShapeType.RECTANGLE));
            this.shapes.add(new Shape(500, 250, Color.BLACK, ShapeType.CIRCLE));
        }

        public List<Shape> getShapes() {
            return shapes;
        }
        
    }
    
    public class Shape {
        
        private final Color color;
        
        private Point centerPoint;
        
        private Polygon shape;
        
        private final ShapeType shapeType;
        
        public Shape(int x, int y, Color color, ShapeType shapeType) {
            this.centerPoint = new Point(x, y);
            this.color = color;
            this.shapeType = shapeType;
            createPolygon(shapeType);
        }
        
        public void incrementCenterPoint(int x, int y) {
            centerPoint.x += x;
            centerPoint.y += y;
            createPolygon(shapeType);
        }

        private void createPolygon(ShapeType shapeType) {
            this.shape = new Polygon();
            
            switch (shapeType) {
            case TRIANGLE:
                int angle = 30;
                int radius = 100;
                for (int i = 0; i < 3; i++) {
                    Point point = toCartesianCoordinates(angle, radius);
                    shape.addPoint(point.x, point.y);
                    angle += 120;
                }
                break;
            case RECTANGLE:
                angle = 45;
                radius = 100;
                for (int i = 0; i < 4; i++) {
                    Point point = toCartesianCoordinates(angle, radius);
                    shape.addPoint(point.x, point.y);
                    angle += 90;
                }
                break;

            case CIRCLE:
                radius = 75;
                for (angle = 0; angle < 360; angle++) {
                    Point point = toCartesianCoordinates(angle, radius);
                    shape.addPoint(point.x, point.y);
                }
                break;
            }
        }
        
        private Point toCartesianCoordinates(int angle, int radius) {
            double theta = Math.toRadians(angle);
            int x = (int) Math.round(Math.cos(theta) * radius) + centerPoint.x;
            int y = (int) Math.round(Math.sin(theta) * radius) + centerPoint.y;
            return new Point(x, y);
        }

        public Color getColor() {
            return color;
        }

        public Point getCenterPoint() {
            return centerPoint;
        }

        public Polygon getShape() {
            return shape;
        }
        
    }
    
    public enum ShapeType {
        TRIANGLE, RECTANGLE, CIRCLE
    }

}

Answer 3

They just stay in the same layers...

That's because of the order in which you are drawing them:

drawRec.paintComponent(g);
drawCirc.paintComponent(g);
drawTri.paintComponent(g);

Which will result in the drawTri to always be painted on top of the others (because you always paint it last). In a similar way, drawRec will be painted on the bottom of the others (since you are painting it always first). Then drawCirc will be painted in the middle. There is no dynamic order (let me put it) of the painting here. It doesn't matter what you drag or not, they are always going to be painted in that sequence.

A solution might be to have them in a list or array of some sort where when you drag one shape, you put it last in the list, and move the others before it. If you combine that with painting all shapes sequentialy from the list, then you will have your desired result.

---

...if i stack them all on top of each other I still pick up the rectangle first.

That's because of how your mousePressed in the ClickListener class works: it first of all checks if the rectangle is clicked and then the others. That means that if the rectangle overlaps another shape, then the rectangle is always going to be prioritized.

One solution might again be putting all your shapes in a data structure where you can modify their selection order. For example a list or array where let's say that the closer to the top is a shape then the later it will appear in the list. Then, when the user clicks somewhere, you will check the shapes starting from the last one in the list going to first one. If you find something, you immediately break the loop and select what you found. If you don't find anything, then the user clicked the panel somewhere where there are no shapes currently.

---

I am almost certain there must be more efficient data structures than a list or array for this problem (because you have to iterate in linear time all shapes to find the one clicked), but I am not an expert on collision detection, so, in order to keep things simple, I am going to stick with it. But there is also one other operation we want to do: change the painting and the selection order of the clicked shape. Long story short, we can use a LinkedHashSet for the job, because:

1. It maintains an order of the shapes.
2. We can quickly and efficiently change the order by first removing the clicked shape from its current postion (constant time) and then adding it back to the LinkedHashSet (also constant time), essentialy placing it last in the insertion order. So that automatically means that we have to use the last element in the set as the top most one. And that's good, because when painting we can iterate over all shapes in the set in the order in which they are found in it, so the last shape will be painted last (which means on top of all others). The same stands for the selection of a shape when clicking: we iterate over all elements, and select the last one which we found containing the user's click point. If LinkedHashSet had a descending iterator (by insertion order) then we could also optimize a little the searching of shapes at a given click point, but it doesn't (at least for Java 8 in which the following demonstration/example code applies), so I will stick with iterating from the start, checking all shapes every time and keeping the last one found containing the click point.

Finally, I would advise you to use the API class java.awt.Shape for the shapes since this enables you to create arbitrary shapes and get the contains method to check if a point lies inside them, the drawing/filling capability, the bounds, the path iterator, and so on...

Summarizing all the above, with an example code:

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Paint;
import java.awt.Point;
import java.awt.Shape;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.AffineTransform;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Point2D;
import java.awt.geom.Rectangle2D;
import java.util.Collection;
import java.util.LinkedHashSet;
import java.util.Objects;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

public class NonComponentMain {
    
    public static Shape createRectangle(final double width,
                                        final double height) {
        return new Rectangle2D.Double(0, 0, width, height);
    }
    
    public static Shape createEllipse(final double width,
                                      final double height) {
        return new Ellipse2D.Double(0, 0, width, height);
    }
    
    public static Shape createCircle(final double radius) {
        return createEllipse(radius + radius, radius + radius);
    }
    
    public static class MoveableShapeHolder {
        private final Shape shape;
        private final Paint paint;
        private final Rectangle2D originalBounds;
        private double offsetX, offsetY;
        
        public MoveableShapeHolder(final Shape shape,
                                   final Paint paint) {
            this.shape = Objects.requireNonNull(shape);
            this.paint = paint;
            offsetX = offsetY = 0;
            originalBounds = shape.getBounds2D();
        }
        
        public void paint(final Graphics2D g2d) {
            final AffineTransform originalAffineTransform = g2d.getTransform();
            final Paint originalPaint = g2d.getPaint();
            g2d.translate(offsetX, offsetY);
            if (paint != null)
                g2d.setPaint(paint);
            g2d.fill(shape);
            g2d.setPaint(originalPaint);
            g2d.setTransform(originalAffineTransform);
        }
        
        public void moveTo(final double newBoundsCenterX,
                           final double newBoundsCenterY) {
            offsetX = newBoundsCenterX - originalBounds.getCenterX();
            offsetY = newBoundsCenterY - originalBounds.getCenterY();
        }
        
        public void moveBy(final double dx,
                           final double dy) {
            offsetX += dx;
            offsetY += dy;
        }
        
        public boolean contains(final Point2D pt) {
            return shape.contains(pt.getX() - offsetX, pt.getY() - offsetY);
        }
        
        public Point2D getTopLeft() {
            return new Point2D.Double(offsetX + originalBounds.getX(), offsetY + originalBounds.getY());
        }
        
        public Point2D getCenter() {
            return new Point2D.Double(offsetX + originalBounds.getCenterX(), offsetY + originalBounds.getCenterY()); //Like 'getTopLeft' but with adding half the size.
        }
        
        public Point2D getBottomRight() {
            return new Point2D.Double(offsetX + originalBounds.getMaxX(), offsetY + originalBounds.getMaxY()); //Like 'getTopLeft' but with adding the size of the bounds.
        }
    }
    
    public static class DrawPanel extends JPanel {
        
        private class MouseDrag extends MouseAdapter {
            private MoveableShapeHolder current;
            private Point origin;
            private Point2D center;
            
            @Override
            public void mousePressed(final MouseEvent e) {
                current = null;
                center = null;
                final Point evtLoc = e.getPoint();
                for (final MoveableShapeHolder moveable: moveables)
                    if (moveable.contains(evtLoc))
                        current = moveable; //Keep the last moveable found to contain the click point! It's important to be the last one, because the later the moveable appears in the collection, the closer to top its layer.

                if (current != null) { //If a shape was clicked...
                    
                    //Initialize MouseDrag's state:
                    origin = e.getPoint();
                    center = current.getCenter();
                    
                    //Move to topmost layer:
                    moveables.remove(current); //Remove from its current position.
                    moveables.add(current); //Move to last (topmost layer).
                    
                    //Rapaint panel:
                    repaint();
                }
            }
            
            @Override
            public void mouseDragged(final MouseEvent e) {
                if (current != null) { //If we are dragging something (and not empty space), then:
                    current.moveTo(center.getX() + e.getX() - origin.x, center.getY() + e.getY() - origin.y);
                    repaint();
                }
            }

            @Override
            public void mouseReleased(final MouseEvent e) {
                current = null;
                origin = null;
                center = null;
            }
        }
        
        private final LinkedHashSet<MoveableShapeHolder> moveables;
        
        public DrawPanel() {
            moveables = new LinkedHashSet<>();
            final MouseAdapter ma = new MouseDrag();
            super.addMouseMotionListener(ma);
            super.addMouseListener(ma);
        }
        
        /**
         * Warning: all operations on the returned value must be made on the EDT.
         * @return 
         */
        public Collection<MoveableShapeHolder> getMoveables() {
            return moveables;
        }
        
        @Override
        protected void paintComponent(final Graphics g) {
            super.paintComponent(g);
            moveables.forEach(moveable -> moveable.paint((Graphics2D) g)); //Topmost moveable is painted last.
        }
        
        @Override
        public Dimension getPreferredSize() {
            if (isPreferredSizeSet())
                return super.getPreferredSize();
            final Dimension preferredSize = new Dimension();
            moveables.forEach(moveable -> {
                final Point2D max = moveable.getBottomRight();
                preferredSize.width = Math.max(preferredSize.width, (int) Math.ceil(max.getX()));
                preferredSize.height = Math.max(preferredSize.height, (int) Math.ceil(max.getY()));
            });
            return preferredSize;
        }
    }
    
    private static void createAndShowGUI() {
        final DrawPanel drawPanel = new DrawPanel();
        final Collection<MoveableShapeHolder> moveables = drawPanel.getMoveables();
        
        MoveableShapeHolder moveable = new MoveableShapeHolder(createRectangle(100, 50), Color.RED);
        moveable.moveTo(100, 75);
        moveables.add(moveable);
        
        moveable = new MoveableShapeHolder(createCircle(40), Color.GREEN);
        moveable.moveTo(125, 100);
        moveables.add(moveable);
        
        moveable = new MoveableShapeHolder(createRectangle(25, 75), Color.BLUE);
        moveable.moveTo(125, 75);
        moveables.add(moveable);
        
        final JFrame frame = new JFrame("Click to drag");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(drawPanel);
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
    
    public static void main(final String[] args) {
        SwingUtilities.invokeLater(NonComponentMain::createAndShowGUI);
    }
}

---

All the above apply in the case you want to work with a single custom component painting all shapes. If instead you want, you can create a custom component for each shape and use a JLayeredPane for positioning them on top of each other. But then you would probably need a custom LayoutManager too (in order to handle the location of each component).