How to move an image on a Graphics2D after a user clicks it

Question

I implemented MouseListener and on mousePressed, I get the x-axis and y-axis the piece is positioned on when the mouse is pressed, and on mouseReleased, I get the x-axis and y-axis the piece is positioned on when the mouse is released. I want to make the piece that was pressed, which is a BufferedImage, move to the location of where the mouse was released. I tried to redraw and repaint the Graphics2D but that did not work.

Code:

public class NewBoard extends JPanel implements MouseListener{
static public Font font;
private Map<Integer, Character> x_AxisMap = new HashMap<Integer, Character>();
private Map<Integer, Character> y_AxisMap = new HashMap<Integer, Character>();
public int[][] positions = {{0, 1, 2, 3, 4, 5, 6, 7}, 
                     {8, 9, 10, 11, 12, 13, 14, 15}, 
                     {16, 17, 18, 19, 20, 21, 22, 23}, 
                     {24, 25, 26, 27, 28, 29, 30, 31}, 
                     {32, 33, 34, 35, 36, 37, 38, 39}, 
                     {40, 41, 42, 43, 44, 45, 46, 47}, 
                     {48, 49, 50, 51, 52, 53, 54, 55}, 
                     {56, 57, 58, 59, 60, 61, 62, 63}};

public Map<Integer, String> piecePosition = new HashMap<Integer, String>();
public NewBoard(){
    try { font = Font.createFont(Font.TRUETYPE_FONT, new File("AlphaRomaineFont.ttf"));
    }
    catch(IOException | FontFormatException e){
        e.printStackTrace(); 
    }


    addMouseListener(this);
    setBackground(Color.decode("#ebe4e4"));


    for(int i = 0; i <= 63; i++){
        if(i == 0 || i == 7) piecePosition.put(i, "black ROOK");
        if(i == 1 || i == 6) piecePosition.put(i, "black KNIGHT");
        if(i == 2 || i == 5) piecePosition.put(i, "black BISHOP");
        if(i == 3) piecePosition.put(i, "black QUEEN");
        if(i == 4) piecePosition.put(i, "black KING");
        if(i >= 8 && i <= 15) piecePosition.put(i, "black PAWN");

        if(i == 56 || i == 63) piecePosition.put(i, "white ROOK");
        if(i == 57 || i == 62) piecePosition.put(i, "white KNIGHT");
        if(i == 58 || i == 61) piecePosition.put(i, "white BISHOP");
        if(i == 59) piecePosition.put(i, "white QUEEN");
        if(i == 60) piecePosition.put(i, "white KING");
        if(i >= 48 && i <= 55) piecePosition.put(i, "white PAWN");

        if(i >= 16 && i <= 47) piecePosition.put(i, null);
    }

    System.out.println(piecePosition);
    String a ="abcdefgh";
    String n = "87654321";
    for(int i = 0; i <= 7; i++){
        x_AxisMap.put(i, a.charAt(i));
    }
    
    for(int i = 0; i <= 7; i++){
        y_AxisMap.put(i, n.charAt(i));
    }
}

@Override
public Dimension getPreferredSize() {
    return new Dimension(720, 720);
}
@Override
protected void paintComponent (Graphics graphic){
    super.paintComponent(graphic);
    Graphics2D g2d = (Graphics2D) graphic.create();
    boolean color = true;
    g2d.setFont(new Font("AlphaRomaineFont.ttf", Font.PLAIN, 18));
        for(int y = 0; y < 8; y++){
            for(int x = 0; x < 8; x++){
                if(color){
                    g2d.setColor(Color.decode("#f7e7ce")); //bright 
                }
                else if(!color){
                    g2d.setColor(Color.decode("#B58863")); //dark
                }
                g2d.fillRect(x*(getWidth()/8), y*(getHeight()/8), getWidth()/8, getHeight()/8);

                if(y == 7){
                    g2d.setColor(Color.BLACK);
                    g2d.drawString(String.valueOf(x_AxisMap.get(x)), x*(getWidth()/8)+3,  y*(getHeight()/8)+87);
                    if(color){
                        g2d.setColor(Color.decode("#f7e7ce"));
                    }
                    else if(!color){
                        g2d.setColor(Color.decode("#B58863"));
                    }
                }

                if(x == 7){
                    g2d.setColor(Color.BLACK);
                    g2d.drawString(String.valueOf(y_AxisMap.get(y)), x*(getWidth()/8)+80,  y*(getHeight()/8)+15);
                    if(color){
                        g2d.setColor(Color.decode("#f7e7ce"));
                    }
                    else if(!color){
                        g2d.setColor(Color.decode("#B58863"));
                    }
                }
                if(y == 0){
                    if(x == 0 || x == 7){
                        Image piece = Piece.ROOK.black();
                        g2d.drawImage(piece, x*(getWidth()/8), y*(getWidth()/8), this);
                    }
                    if(x == 1 || x == 6){
                        Image piece = Piece.KNIGHT.black();
                        g2d.drawImage(piece, x*(getWidth()/8), y*(getWidth()/8), this);
                    }
                    if(x == 2 || x == 5){
                        Image piece = Piece.BISHOP.black();
                        g2d.drawImage(piece, x*(getWidth()/8), y*(getWidth()/8), this);
                    }
                    if(x == 3){
                        Image piece = Piece.QUEEN.black();
                        g2d.drawImage(piece, x*(getWidth()/8), y*(getWidth()/8), this);


                    }
                    if(x == 4){
                        Image piece = Piece.KING.black();
                        g2d.drawImage(piece, x*(getWidth()/8), y*(getWidth()/8), this);
                    }
                }
                if(y == 1){
                    Image piece = Piece.PAWN.black();
                    g2d.drawImage(piece, x*(getWidth()/8), y*(getWidth()/8), this);
                }

                if(y == 6){
                    Image piece = Piece.PAWN.white();
                    g2d.drawImage(piece, x*(getWidth()/8), y*(getWidth()/8), this);
                }

                if(y == 7){
                    if(x == 0 || x == 7){
                        Image piece = Piece.ROOK.white();
                        g2d.drawImage(piece, x*(getWidth()/8), y*(getWidth()/8), this);
                    }
                    if(x == 1 || x == 6){
                        Image piece = Piece.KNIGHT.white();
                        g2d.drawImage(piece, x*(getWidth()/8), y*(getWidth()/8), this);
                    }
                    if(x == 2 || x == 5){
                        Image piece = Piece.BISHOP.white();
                        g2d.drawImage(piece, x*(getWidth()/8), y*(getWidth()/8), this);
                    }
                    if(x == 3){
                        Image piece = Piece.QUEEN.white();
                        g2d.drawImage(piece, x*(getWidth()/8), y*(getWidth()/8), this);
                    }
                    if(x == 4){
                        Image piece = Piece.KING.white();
                        g2d.drawImage(piece, x*(getWidth()/8), y*(getWidth()/8), this);
                    }
                }
                color = !color;

            }
            color = !color;
        }

    }   
private BufferedImage pressedPiece;
private int pressedPosition;
private int pressedX;
private int pressedY;


private BufferedImage releasedPiece;
private int releasedPosition;
private int releasedX;
private int releasedY;
@Override
public void mouseClicked(MouseEvent e) {
    // TODO Auto-generated method stub

}
@Override
public void mousePressed(MouseEvent e) {
    // TODO Auto-generated method stub
    System.out.println("Pressed");
    if(getPiece(e.getX(), e.getY()) != null){
        String[] split = getPiece(e.getX(), e.getY()).split(" ");
        if(split[0].equals("white")){
            if(split[1].equals("PAWN")) pressedPiece = Piece.PAWN.white();
            if(split[1].equals("ROOK")) pressedPiece = Piece.ROOK.white();
            if(split[1].equals("KNIGHT")) pressedPiece = Piece.KNIGHT.white();
            if(split[1].equals("BISHOP")) pressedPiece = Piece.BISHOP.white();
            if(split[1].equals("QUEEN")) pressedPiece = Piece.QUEEN.white();
            if(split[1].equals("KING")) pressedPiece = Piece.KING.white();
        }
        if(split[0].equals("black")){
            if(split[1].equals("PAWN")) pressedPiece = Piece.PAWN.black();
            if(split[1].equals("ROOK")) pressedPiece = Piece.ROOK.black();
            if(split[1].equals("KNIGHT")) pressedPiece = Piece.KNIGHT.black();
            if(split[1].equals("BISHOP")) pressedPiece = Piece.BISHOP.black();
            if(split[1].equals("QUEEN")) pressedPiece = Piece.QUEEN.black();
            if(split[1].equals("KING")) pressedPiece = Piece.KING.black();
        }
    }


    pressedX = e.getX()/(getWidth()/8);
    pressedY = e.getY()/(getWidth()/8);
    pressedPosition = getNumberPosition(pressedX, pressedY);
    setBackground(Color.decode("#cf1e15"));
    setOpaque(true);
}
@Override
public void mouseReleased(MouseEvent e) {
    // TODO Auto-generated method stub
    System.out.println("Released");
    if(getPiece(e.getX(), e.getY()) != null){
        String[] split = getPiece(e.getX(), e.getY()).split(" ");
        if(split[0].equals("white")){
            if(split[1].equals("PAWN")) releasedPiece = Piece.PAWN.white();
            if(split[1].equals("ROOK")) releasedPiece = Piece.ROOK.white();
            if(split[1].equals("KNIGHT")) releasedPiece = Piece.KNIGHT.white();
            if(split[1].equals("BISHOP")) releasedPiece = Piece.BISHOP.white();
            if(split[1].equals("QUEEN")) releasedPiece = Piece.QUEEN.white();
            if(split[1].equals("KING")) releasedPiece = Piece.KING.white();
        }
        if(split[0].equals("black")){
            if(split[1].equals("PAWN")) releasedPiece = Piece.PAWN.black();
            if(split[1].equals("ROOK")) releasedPiece = Piece.ROOK.black();
            if(split[1].equals("KNIGHT")) releasedPiece = Piece.KNIGHT.black();
            if(split[1].equals("BISHOP")) releasedPiece = Piece.BISHOP.black();
            if(split[1].equals("QUEEN")) releasedPiece = Piece.QUEEN.black();
            if(split[1].equals("KING")) releasedPiece = Piece.KING.black();
        }
    }

    releasedX = e.getX()/(getWidth()/8);
    releasedY = e.getY()/(getWidth()/8);
    releasedPosition = getNumberPosition(releasedX, releasedY);
    makeChanges();
}
@Override
public void mouseEntered(MouseEvent e) {
    // TODO Auto-generated method stub
    //System.out.println("Entered");
}
@Override
public void mouseExited(MouseEvent e) {
    // TODO Auto-generated method stub
    //System.out.println("Exited");
}

private String getPiece(int x, int y){
     x = x/(getWidth()/8);
     y = y/(getWidth()/8);

    System.out.println(piecePosition.get(positions[y][x]));
    return piecePosition.get(positions[y][x]);
}
private int getNumberPosition(int x, int y){
    return positions[y][x];
}
public void makeChanges(){
    if(pressedPosition != releasedPosition){
        String pressedColor = "";
        String releasedColor = "";
        if((pressedY % 2 == 0 && pressedX % 2 == 0) || (pressedY % 2 != 0 && pressedX % 2 != 0)) pressedColor = "#f7e7ce";
        if((pressedY % 2 == 0 && pressedX % 2 != 0) || (pressedY % 2 != 0 && pressedX % 2 == 0)) pressedColor = "#B58863";

        if((releasedY % 2 == 0 && releasedX % 2 == 0) || (releasedY % 2 != 0 && releasedX % 2 != 0)) releasedColor = "#f7e7ce";
        if((releasedY % 2 == 0 && releasedX % 2 != 0) || (releasedY % 2 != 0 && releasedX % 2 == 0)) releasedColor = "#B58863";

        
        //if(!tempColor.equals("")) g2d.setColor(Color.decode(tempColor));
        //else g2d.setColor(Color.RED);
    }
}
}

Queeg · Accepted Answer · 2022-06-28T10:41:12.227

For dragging an image over the Graphics2D I constructed a working example. Note that the paintComponent() method just paints the current state of the component.

The state changes event based on user input. Whenever that happens, call repaint() so the UI knows this component should be redrawn. But it is the Swing framework to decide whether/when to call paintComponent().

package com.mycompany.test;

import java.awt.Cursor;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.Rectangle;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionAdapter;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class ImageDragPanel extends JPanel {
    
    // load image from classpath
    // private final javax.swing.ImageIcon image = new javax.swing.ImageIcon(getClass().getResource("/public_FILL0_wght400_GRAD0_opsz48.png"));

    // load image from external URL
    private final javax.swing.ImageIcon image = new javax.swing.ImageIcon(new URL(https://i.stack.imgur.com/memI0.png));
    private Rectangle pos;
    private Point dragStart = null;

    public ImageDragPanel() {
        pos = new Rectangle(0, 0, image.getIconWidth(), image.getIconHeight());
        addMouseListener(new MouseAdapter() {
            @Override
            public void mousePressed(MouseEvent e) {
                if (pos.contains(e.getPoint())) {
                    dragStart = e.getPoint();
                    e.consume();
                    setCursor(Cursor.getPredefinedCursor(Cursor.MOVE_CURSOR));
                }
            }

            @Override
            public void mouseReleased(MouseEvent e) {
                if (dragStart != null) {
                    dragStart = null;
                    e.consume();
                    setCursor(Cursor.getDefaultCursor());
                }
            }

        });
        addMouseMotionListener(new MouseMotionAdapter() {
            @Override
            public void mouseDragged(MouseEvent e) {
                if (dragStart != null) {
                    Point origin = new Point(
                            e.getPoint().x - (int)pos.getWidth()/2, 
                            e.getPoint().y - (int)pos.getHeight()/2
                    );                    
                    pos.setLocation(origin);
                    repaint();
                }
            }
    });
    }

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D)g;
        
        g2d.drawImage(image.getImage(), pos.x, pos.y, null);
    }
    
    public static void main(String[] args) {
        JFrame f = new JFrame();
        ImageDragPanel idp = new ImageDragPanel();
        Dimension d = new Dimension(400, 400);
        idp.setMinimumSize(d);
        idp.setPreferredSize(d);
        f.add(idp);
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.pack();
        f.setLocationRelativeTo(null);
        f.show();
    }
}

So this will guarantee a smooth dragging operation. As it seems you have a grid with limited target positions. So upon drop (or button release) just decide which tile the mouse pointer is on and calculate the new location - be it in screen coordinates or in your grid, then redraw.

Nice answer! :) Tip: `getClass().getResource("/public_FILL0_wght400_GRAD0_opsz48.png")` to make the example work for others who copy/paste the code, you are welcome to hot-link to the images seen in [this answer](https://stackoverflow.com/a/19209651/418556). — Andrew Thompson, Jun 28 '22 at 00:39
I added a picture from your hint. The classpath line is still good for setting up own projects. — Queeg, Jun 28 '22 at 06:21
`// load image from URL` Interestingly (or not, I guess) `getResource` *also* returns a `URL`. But yes, you're right, this is an unusual way to gain resources for an app. Appropriate for tiny codes appearing here, but unusual in The Real World™. — Andrew Thompson, Jun 28 '22 at 10:14

How to move an image on a Graphics2D after a user clicks it

1 Answers1

Linked