Paint with Swing Java

Joaco Terniro picture Joaco Terniro · Apr 12, 2015 · Viewed 12k times · Source

first of all hi everyone!

I'm having a big problem with this: i need to build a program which consist in building a java swing interface that contains 5 squares, and one button. The button function is to draw a circle inside the squares. I have this code, but i dont know how to continue.

The Frame class:

import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
import java.io.*;
public class Window extends JFrame{

    private static Pane pane;

    private Window(){
        setResizable(false);
        setVisible(true);
        setBounds(0,0,350,200);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }

    public static void main(String[] args){
        Window window = new Window();
        window.setLocationRelativeTo(null);

        pane = new Pane();
        window.add(pane);       
    }

}

The pane class:

import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
import java.io.*;
import javax.swing.JButton;
import javax.swing.JPanel;
import javax.swing.JLayeredPane;

public class Pane extends JPanel implements ActionListener{

    private JButton next;

    public Pane(){
        setBounds(0,0,350,200);
        setVisible(true);
        setLayout(null);
        repaint();

        next = new JButton("Next");
        next.setBounds(125,125,100,30);
        next.addActionListener(this);
        add(next);

    }

    public void actionPerformed (ActionEvent e){
        Object source = e.getSource();
        if (source == next){
            Graphics g = this.getGraphics();
            drawing(g);
        }
    }

    public void paintComponent(Graphics g){
        super.paintComponent(g);
        g.drawRect(50,50,50,50);
        g.drawRect(100,50,50,50);
        g.drawRect(150,50,50,50);
        g.drawRect(200,50,50,50);
        g.drawRect(250,50,50,50);
    }

    private int times = 0;
    public void drawing(Graphics g){
        if(times<5){
            g.setColor(Color.RED);
            g.fillOval(50+times*50, 50, 50, 50);
            times++;
        }
    }

}

I have this problems and questions:

  • When i hit for the first time the "Next" button, the circle appears and dissapears instantly in the first square. How can i do to let the circle be visible for the first time?
  • When i hit for the second time the button, it appears the circle in the second square. What i don't know and i wanted to ask is this: how can i make to disappear the circle in the first square and only let visible the circle in the second square? What i want to do is the same for the case when the circle is in the third square, i want to make disappear the circle in the second square.
  • If i want to make the circle appear at the beggining of the program, but i want a blue circle, and then the 2°, 3°, 4° and 5° position i want a red circle inside them, how can i do it? (Remember that the circles will appear when i clic the "Next" button.

Thank you very much everyone!

Answer

camickr picture camickr · Apr 12, 2015
//Graphics g = this.getGraphics();

Don't use getGraphics() to do painting. That painting is only temporary and will be lost when ever the components repaints itself.

All painting MUST be done in the paintComponent() method. This means you need to set a property in your class that will tell the paintComponent() what to paint.

One way do to this is to keep a List of objects to paint. Then in the paintComponent() method you iterate through the List and paint the objects.

So you might create the List with code like:

List<Shape> shapes = new ArrayList<Shape>();

The Shape interface allows you to represent geometric shapes, like circles, rectangles, polygons etc. Then when you want to paint the first circle you add a circle Shape to the List with code like:

shapes.add( new Ellipse2D.Double(50, 50, 50, 50) );

Finally in the paintComponent() method, after you paint your rectangles, you add code to paint the Shapes in the List.

Graphics2D g2d = (Graphics2D)g.create();

for (Shape shape: shapes)
{
    g2d.setColor( Color.RED );
    g2d.fill( shape );
}

g2d.dispose()

So whenever you click the next button you clear the List and add a new Shape to paint. Or if you don't clear the List then you can add more circles and they will all be painted.