Question

I am trying to create a JFrame that displays an image from a file path onto a particular position on the JFrame. At a later time (when a button is clicked), I want the image to move positions, say, 50 pixles to the left. If a layout manager is necessary, I want to use the null layout, as this is a project for myself and I am not quite ready to learn how to write my own layout manager.

So far, I have managed to display a BufferedImage in a frame, but I do not know how to specify its position.

Is using a BufferedImage even the correct approach? What is the best way to go about doing this?

Update: I tried to follow your suggestion of using mouselistener and it resulted in this:

class ImgComponent extends JComponent  implements ChangeListener, MouseListener  {

MovableImage mi;

public ImgComponent(MovableImage mi) {
    this.mi = mi;
    mi.addListener(this);
      mi.addListener1(this);
}

@Override
protected void paintComponent(Graphics g) {
    super.paintComponent(g);
    g.drawImage(mi.i, mi.getX(), mi.getY(), null);
}

@Override
public void stateChanged(ChangeEvent e) {
    repaint();

}
@Override
public void mouseClicked(MouseEvent e) {
        mi.setPos(100, 100);
        System.out.println("yay");
}

}

But unfortinely, the mouseClicked event never triggers. I just want that damn image to move, lol.

Answer 1

Here’s a complete example that uses the model/view/controller pattern. (Just dump all snippets after each other in a single .java file.)

import java.awt.*;
import java.awt.event.ActionEvent;
import java.util.*;
import java.util.List;

import javax.swing.*;
import javax.swing.event.*;


// A class encapsulating an image and a x-coordinate (a "model")
class MovableImage {
    Image i = new ImageIcon("duke.png").getImage();
    private int x = 0;

    // Observers that are interested in movements.
    List<ChangeListener> listeners = new ArrayList<ChangeListener>();

    public void addListener(ChangeListener cl) {
        listeners.add(cl);
    }

    public int getX() {
        return x;
    }

    public void incrementX() {
        x += 10;

        // Notify those interested.
        for (ChangeListener cl : listeners)
            cl.stateChanged(null);
    }
}

 

// A graphical component displaying the model.
// Object of this class are interested in movement because when the image moves,
// this component needs to be repainted.
class ImgComponent extends JComponent implements ChangeListener {

    // The movable image to present.
    MovableImage mi;

    public ImgComponent(MovableImage mi) {
        this.mi = mi;
        mi.addListener(this);
    }

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawImage(mi.i, mi.getX(), 10, null);
    }

    // This method is called from MovableImage when the position changes.
    @Override
    public void stateChanged(ChangeEvent e) {
        repaint();
    }
}

 

// Main class.
public class FrameTestBase extends JFrame {

    public static void main(String args[]) {

        // Create the "model".
        final MovableImage mi = new MovableImage();

        FrameTestBase t = new FrameTestBase();
        t.setLayout(new BorderLayout());

        // Add a component presenting the model.
        t.add(new ImgComponent(mi), BorderLayout.CENTER);

        // Create a button which increments x when clicked on.
        t.add(new JButton(new AbstractAction("Move right") {
            @Override
            public void actionPerformed(ActionEvent e) {
                mi.incrementX();
            }
        }), BorderLayout.SOUTH);

        // Show it.
        t.setDefaultCloseOperation(EXIT_ON_CLOSE);
        t.setSize(400, 400);
        t.setVisible(true);
    }
}

---

Regarding your edit:

You need to add the mouse listener as well. In the constructor:

public ImgComponent(MovableImage mi) {
    this.mi = mi;
    mi.addListener(this);
    mi.addListener1(this);
}

add the following line at the bottom:

    addMouseListener(this);