Drawing multiple connected lines in JApplet by using paintComponent

Question

I am trying to create application where user can draw lines in Canvas. User can select direction from dropdown list and enter length of line. First line starts from center of Canvas, the next one starts where the previous one ended and so on - user can draw multiple lines one by one and all lines are connected.

I have two classes - TurtleApplet which creates GUI and Canvas with program logic:

public class TurtleApplet extends JApplet implements ActionListener
{
private JComboBox direction;
private JRadioButton activeButton, passiveButton;
private Button drawButton;
private ButtonGroup group;
private TextField pixels;
private Canvas canvas; 
private JPanel panel;
private JPanel panelRadio;
private Button quitPr;


public void init() 
{ 

    //directions
    String[] directionStrings = { "Right", "Left", "Up", "Down"};
    direction = new JComboBox(directionStrings);
    //direction.setSelectedIndex(4);

    //Buttons
    activeButton = new JRadioButton("Aktīvs");
    passiveButton = new JRadioButton("Neaktīvs");
    quitPr = new Button("Iziet");

    //Canvas
    canvas = new Canvas();
    //canvas.setSize(600, 500);
    //canvas.setBackground(Color.red);
    canvas.setBorder(BorderFactory.createTitledBorder("Turtle drawing"));


    //Panels
    panel = new JPanel();
    panelRadio =new JPanel();   
    panel.setLayout(new FlowLayout());
    panelRadio.setLayout(new FlowLayout());

    //actionListener
    activeButton.addActionListener(this);
    passiveButton.addActionListener(this);
    activeButton.setSelected(true);
    quitPr.addActionListener(this);

    //Add radiobuttons
    group = new ButtonGroup();
    group.add(activeButton);
    group.add(passiveButton);


    //Add Buttons to panel
    panelRadio.add(activeButton);
    panelRadio.add(passiveButton);

    //textfield
    pixels = new TextField(12);

    //Draw button
    drawButton = new Button("Zīmēt");
    drawButton.addActionListener(this);
    direction.addActionListener(this);

    panel.add(panelRadio); 
    panel.add(pixels);
    panel.add(direction);
    panel.add(drawButton);
    panel.add(quitPr);
    getContentPane().add(panel,"North");
    getContentPane().add(canvas, "Center");
    setSize(650,550);

} 


public void actionPerformed( ActionEvent e) 
{
    if ( e.getSource() == activeButton ) {  
        drawButton.setVisible(true);
        pixels.setEditable(true);

    } else if (e.getSource() == passiveButton)  {    
        drawButton.setVisible(false);
        pixels.setEditable(false);

    } else if(e.getSource() == quitPr){
        System.exit(0);
    }else if(e.getSource() == drawButton){

        int y = Integer.parseInt(pixels.getText());
        canvas.addPatt(direction.getSelectedIndex(), Integer.parseInt(pixels.getText()));
        repaint();
    }

   //repaint();
} 


} 




 public class Canvas extends JPanel {
private static final int RIGHT=0, LEFT=1, UP=2, DOWN=3;
public static final int WIDTH=600, HEIGHT=500;
private int direction = 0 ;                          
private int pixels;     
//rivate List points;
public Polygon t = new Polygon();

//public Dimension d = getSize();
public int x = WIDTH/2;
public int y = HEIGHT/2;


public Canvas() {
    setSize(WIDTH, HEIGHT);
}

public void addPatt(int pat, int lev) {
    direction = pat;
    pixels = lev;
}

public void paintComponent(Graphics g) {

    switch (direction) {
    case LEFT: 
        drawLineLeft(g, pixels);

        break;
    case RIGHT:
        drawLineRight(g, pixels);
        break;
    case UP:
        drawLineUp(g, pixels);

        break;
    case DOWN:
        drawLineDown(g, pixels);
        break;
    } 
} 

private void drawLineLeft(Graphics g, int pix){

    if(pix > 0){
       g.drawLine(x, y, x-10*pix, y);//left
       x =x -10*pix;  
    }
}

private void drawLineUp(Graphics g, int pix){

    if(pix > 0){
        g.drawLine(x, y, x, y-10*pix);//up
        y = y-10*pix;    
    }
}

private void drawLineRight(Graphics g, int pix){
    if(pix > 0){
        g.drawLine(x, y, x+10*pix, y);//right
        x = x+10*pix;
    }
}

private void drawLineDown(Graphics g, int pix){
    if(pix > 0){
        g.drawLine(x, y, x, y+10*pix);// down
        y = y+10*pix;
    }
}

}

Applet works, but the problem is to save previous lines, when new one is drawn. When user enters direction and length of line and presses the button, new line appears on the screen, but the previous one disappears. I know that the problem is with paintComponent method, but I don't know how to exactly correct my code to make all lines visible. I was suggested to store point coordinates in array and then paint lines by looping throught array in paintComponent, but I don't know how to achieve this. Maybe there is better solution?

MadProgrammer · Accepted Answer

As I said in your last question, the case state is like an if-else, you only ever allow it to draw a single line. You need to maintain a List of "lines" which can be iterated over each time the paintComponent method is called

Because a line is represented by multiple properties, it's best to encapsulate that information into a simple class or POJO

public enum Direction {
    UP, DOWN, LEFT, RIGHT
}

public class Line {
    private Direction direction;
    private int length;

    public Line(Direction direction, int length) {
        this.direction = direction;
        this.length = length;
    }

    public Direction getDirection() {
        return direction;
    }

    public int getLength() {
        return length;
    }


}

Here, I've separated the direction properties into a simple enum, this allows you to reference the properties more easily elsewhere within your program

Then you maintain a List of Lines, which when paintComponent is called, you simply re-iterate over and repaint...

public class Canvas extends JPanel {

    public static final int WIDTH = 600, HEIGHT = 500;

    public int x = WIDTH / 2;
    public int y = HEIGHT / 2;

    private List lines;

    public Canvas() {
        lines = new ArrayList<>(25);
    }

    @Override
    public Dimension getPreferredSize() {
        return new Dimension(WIDTH, HEIGHT);
    }

    public void addPatt(Direction direction, int length) {
        lines.add(new Line(direction, length));
    }

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        for (Line line : lines) {
            switch (line.getDirection()) {
                case UP:
                    drawLineUp(g, line.getLength());
                    break;
                case DOWN:
                    drawLineDown(g, line.getLength());
                    break;
                case LEFT:
                    drawLineLeft(g, line.getLength());
                    break;
                case RIGHT:
                    drawLineDown(g, line.getLength());
                    break;
            }
        }
    }

    private void drawLineLeft(Graphics g, int pix) {

        if (pix > 0) {
            g.drawLine(x, y, x - 10 * pix, y);//left
            x = x - 10 * pix;
        }
    }

    private void drawLineUp(Graphics g, int pix) {

        if (pix > 0) {
            g.drawLine(x, y, x, y - 10 * pix);//up
            y = y - 10 * pix;
        }
    }

    private void drawLineRight(Graphics g, int pix) {
        if (pix > 0) {
            g.drawLine(x, y, x + 10 * pix, y);//right
            x = x + 10 * pix;
        }
    }

    private void drawLineDown(Graphics g, int pix) {
        if (pix > 0) {
            g.drawLine(x, y, x, y + 10 * pix);// down
            y = y + 10 * pix;
        }
    }

}

Remember, painting in Swing is destructive, you are expected to repaint the entire state of the component every time the paintComponent is called.

See Painting in AWT and Swing and Performing Custom Painting for more details about how painting works

Drawing multiple connected lines in JApplet by using paintComponent

Answers (2)

Related Questions