Move multiple BufferedImage in Java2D?

Question

How can I mousedrag different BufferedImages in Java2D?

For instance, if I have ten or more images, how can I move that images which my mouse is over?

Now I'm importing an BufferedImage with

BufferedImage img = new BufferdImage(new File("filename"));

And I'm painting this with Graphics2D with

public void paintComponent(Graphics g) {
    super.paintComponent(g);
    g2d = (Graphics2D) g;
    g2d.drawImage(img, x1, y1, null);
    g2d.drawImage(img2, x2, y2,null);
}

Everytime I'm moving on a image I'm repaint()-ing the entire screen. My mousemove class is as follows

class MouseMotionHandler extends MouseMotionAdapter {

    @Override
    public void mouseDragged(MouseEvent e) {
        x1 = e.getX() - (img.getWidth() / 2);
        y1 = e.getY() - (img.getHeight() / 2);
        repaint();
    }
}

With this method I'm able to "drag" one picture, but what to do when I will drag more individually?

Answer 1

From what you ask I suppose that your current repainting logic is global. You need to apply it to every image you have. So, if you for instance display every image in JPanel attach MouseMotionListener to every such panel and make this logic happen in JPanel.

If you post more code - especially of the component you show your images in - I will be able to go into more details.

Answer 2

Here's is a simple example that implements dragging for either single- or multiple-selections. The object Node would correspond roughly to your object Card.

Addendum: Also considered the Overlap Layout mentioned in this answer to a related question. Instead of List<Node>, your program would manage a List<Card>, where each Card is a JLabel having a card image.

Answer 3

You can try making a custom component that contains only a single image. Along with your painting and mouse motion handling code, the component overrides the contains method so that it returns true only if the coordinates are within the image.

These components are then stacked in a JLayeredPane, (hopefully) only moving the images that the mouse is on top of.

Answer 4

I should make tree arrays:

1. one for the x-values
2. one for the y-values
3. one for the BufferedImages

So, something like this:

int[] xValues = new int[10];
int[] yValues = new int[10];
BufferedImage[] imgs = new BufferedImage[10];

Then the

class MouseMotionHandler extends MouseMotionAdapter {

    @Override
    public void mouseDragged(MouseEvent e) {
        for (int i = 0; i < 10; i++)
        {
            xValues[i] = e.getX() - (imgs[i].getWidth() / 2);
            yValues[i] = e.getY() - (imgs[i].getHeight() / 2);
        }
        repaint();
    }
}

Then paint them like this:

public void paintComponent(Graphics g) {
    super.paintComponent(g);
    g2d = (Graphics2D) g;
    for (int i = 0; i < 10; i++)
    {
        g2d.drawImage(imgs[i], xValues[i], yValues[i], null);
    }
}

I think something like this is what you need.

Answer 5

Use the BufferedImage to create an ImageIcon which you use to create a JLabel. Then you add the JLabel to the panel that uses a null layout. No custom painting code is required to do this.

Now if you want to drag the label around you can use the Component Mover.

Answer 6

Here's the code for my JLayeredPane init. My problem here is that my images don't show up...

layeredPane = new JLayeredPane();
layeredPane.setPreferredSize(new java.awt.Dimension(500, 410));
layeredPane.setBorder(javax.swing.BorderFactory.createTitledBorder(
                                "Center deck"));
for(BufferedImage imgs : images){
   JLabel label = new JLabel(new ImageIcon(imgs));
   layeredPane.add(label, JLayeredPane.DEFAULT_LAYER);
}
add(layeredPane);