how to draw lines without change background's image?

[eric zheng]

I draw an image in Jpanel as background,and following want to achieve lines or circles movement on the panel. however, when the line move using draw a white color line to overwrite, the background's image changed as well. how can I achieve move the lines without change the image?

[Craig Wood]

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.io.*;
import java.net.*;
import javax.imageio.ImageIO;
import javax.swing.*;
import javax.swing.Timer;
 
public class GraphicImageTest
{
    public static void main(String[] args)
    {
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(new GraphicImagePanel());
        f.setSize(400,400);
        f.setLocation(200,200);
        f.setVisible(true);
    }
}
 
class GraphicImagePanel extends JPanel
{
    Image image;
    Ellipse2D.Double ball;
    int dx, dy;
 
    public GraphicImagePanel()
    {
        loadImage();
        dx = 3;
        dy = 2;
        ball = new Ellipse2D.Double(0,0,40,40);
        new Timer(40, new ActionListener()
        {
            public void actionPerformed(ActionEvent e)
            {
                moveBall();
            }
        }).start();
    }
 
    protected void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
        int w = getWidth();
        int h = getHeight();
        int imageWidth = image.getWidth(this);
        int imageHeight = image.getHeight(this);
        int x = (w - imageWidth)/2;
        int y = (h - imageHeight)/2;
        g2.drawImage(image, x, y, this);
        g2.setPaint(Color.red);
        g2.fill(ball);        
    }
 
    private void moveBall()
    {
        int w = getWidth();
        int h = getHeight();
        if(ball.x + dx < 0 || ball.x + ball.width + dx > w)
            dx *= -1;
        if(ball.y + dy < 0 || ball.y + ball.width + dy > h)
            dy *= -1;
        ball.x += dx;
        ball.y += dy;
        repaint();
    }
 
    private void loadImage()
    {
        String fileName = "images/barnowl.jpg";
        try
        {
            URL url = getClass().getResource(fileName);
            image = ImageIO.read(url);
        }
        catch(MalformedURLException mue)
        {
            System.err.println(mue.getMessage());
        }
        catch(IOException ioe)
        {
            System.err.println(ioe.getMessage());
        }
    }
}

[Norm Miller]

Pursuing this answer a bit further:

Is there any good to be gained by taking advantage of the various layers that the Swing model makes available? I.e., draw the image as shown, but put the ball on the Transparent layer.

If you want to mouse click on the ball, does the answer remain the same?

Thanks

[Craig Wood]

Is there any good to be gained by taking advantage of the various layers that the Swing model makes available? I.e., draw the image as shown, but put the ball on the Transparent layer.

I don't notice any advantage. It seems like one advantage of drawing on a transparent top layer would be to preserve the drawing while we swap or manipulate the image below.

If you want to mouse click on the ball, does the answer remain the same?

It seems to. Let's try it and see:

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.io.*;
import java.net.*;
import javax.imageio.ImageIO;
import javax.swing.*;
import javax.swing.event.*;
 
public class GraphicImageTest
{
    public static void main(String[] args)
    {
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(new GraphicImagePanel());
        f.setSize(400,400);
        f.setLocation(200,200);
        f.setVisible(true);
    }
}
 
class GraphicImagePanel extends JPanel
{
    Image image;
    Ellipse2D.Double ball;
 
    public GraphicImagePanel()
    {
        loadImage();
        ball = new Ellipse2D.Double(100,100,40,40);
        GraphicMover mover = new GraphicMover(this);
        addMouseListener(mover);
        addMouseMotionListener(mover);
    }
  
    protected void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
        int w = getWidth();
        int h = getHeight();
        int imageWidth = image.getWidth(this);
        int imageHeight = image.getHeight(this);
        int x = (w - imageWidth)/2;
        int y = (h - imageHeight)/2;
        g2.drawImage(image, x, y, this);
        g2.setPaint(Color.red);
        g2.fill(ball);        
    }
  
    private void loadImage()
    {
        String fileName = "images/barnowl.jpg";
        try
        {
            URL url = getClass().getResource(fileName);
            image = ImageIO.read(url);
        }
        catch(MalformedURLException mue)
        {
            System.err.println(mue.getMessage());
        }
        catch(IOException ioe)
        {
            System.err.println(ioe.getMessage());
        }
    }
}
 
class GraphicMover extends MouseInputAdapter
{
    GraphicImagePanel imagePanel;
    Point2D.Double offset;
    boolean dragging;
 
    public GraphicMover(GraphicImagePanel gip)
    {
        imagePanel = gip;
        offset = new Point2D.Double();
        dragging = false;
    }
 
    public void mousePressed(MouseEvent e)
    {
        Point p = e.getPoint();
        if(imagePanel.ball.contains(p.x, p.y))
        {
            offset.x = p.x - imagePanel.ball.x;
            offset.y = p.y - imagePanel.ball.y;
            dragging = true;
        }
    }
 
    public void mouseReleased(MouseEvent e)
    {
        dragging = false;
    }
 
    public void mouseDragged(MouseEvent e)
    {
        if(dragging)
        {
            imagePanel.ball.x = e.getX() - offset.x;
            imagePanel.ball.y = e.getY() - offset.y;
            imagePanel.repaint();
        }
    }
}

[Norm Miller]

That is very neat!

Thank you.

[eric zheng]

Thanks a lot!