Trying to draw lines with JPanel

Question

I am trying to draw lines using JPanel and I have hit somewhat of a wall. I can get two sides down but once it comes to subtracting from the x cord it all goes wrong.

package GUIstuff;
import java.awt.Graphics;
import javax.swing.JPanel;

public class DrawPanel extends JPanel{

public void paintComponent (Graphics g){

    super.paintComponent(g);

    int width = getWidth();
    int height = getHeight();

    int drawCounter = 0; // counters for all the while statements 
    int drawCounter2 = 0;
    int drawCounter3 = 0;
    int drawCounter4 = 0;



    int x1 = 0; // cords change with the while statemetns
    int x2 = 0;
    int y1 = 0;
    int y2 = 0;     
    while (drawCounter <= 15){ // counter 
    y2 = 250;
    g.drawLine(x1, y1, x2, y2);
    x2 = x2 + 15;
    y1 = y1 + 15;
    drawCounter++;  } 


    int u1 = 0;
    int u2 = 0;
    int v1 = 0;
    int v2 = 0;
    while (drawCounter2 <= 15){
    u2 = 250;
    g.drawLine(u1, v1, u2, v2);
    u1 = u1 + 15;
    v2 = v2 + 15;
    drawCounter2++; 
    }

    int a1 = 0;
    int a2 = 0;
    int b1 = 0;
    int b2 = 0;

    while (drawCounter3 <= 15){
    a2 = 250;
    g.drawLine(a1, b1, a2, b2);
    b1 = b1 + 15;
    a2 = a2 - 15;
    drawCounter3++;

    }
 }
}

Here is my runner class

package GUIstuff;
import javax.swing.JFrame;


public class DrawPanelTest {

public static void main (String args[]){

    DrawPanel panel = new DrawPanel();

    JFrame application = new JFrame();

    application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    application.add(panel);
    application.setSize (250, 250);
    application.setVisible(true);


}

}

I have a the lines in the bottom left and the upper right but when I try to subtract from x I just get lines going a crossed the whole box.

Answer 1

One way to draw this type of graphic would be to divide the drawing into quadrants. Here's a GUI I came up with.

This drawing is created by drawing lines all around the rectangle.

I created a JFrame and a drawing JPanel. I created the drawing JPanel by dividing the horizontal width and vertical height into the same number of increments. Since the width is greater than the height, the width increment is greater than the height increment.

I divided the drawing into quarters, and worked on the code for each quarter separately, using fewer and larger increments. Once I had all four quarters working, I quadrupled the number of increments and divided the width increment and the height increment by four.

Here's the complete runnable code.

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

public class DrawOvalRectangle implements Runnable {

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new DrawOvalRectangle());
    }

    @Override
    public void run() {
        JFrame frame = new JFrame("Curved Lines 2021");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        
        frame.add(new DrawingPanel(), BorderLayout.CENTER);
        
        frame.pack();
        frame.setLocationByPlatform(true);
        frame.setVisible(true);
    }
    
    public class DrawingPanel extends JPanel {

        private static final long serialVersionUID = 1L;
        
        private int width, height, margin, increments, xIncrement, yIncrement;
        
        public DrawingPanel() {
            this.margin = 10;
            this.increments = 80;
            this.xIncrement = 8;
            this.yIncrement = 6;
            this.width = increments * xIncrement;
            this.height = increments * yIncrement;
            this.setPreferredSize(new Dimension(
                    width + margin + margin, height + margin + margin));
        }
        
        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            g.setColor(Color.BLACK);
            
            drawNorthwestQuadrant(g);
            drawNortheastQuadrant(g);
            drawSouthwestQuadrant(g);
            drawSoutheastQuadrant(g);
        }
        
        private void drawNorthwestQuadrant(Graphics g) {
            int x1 = margin;
            int y1 = height + margin;
            int x2 = margin;
            int y2 = margin;
            
            for (int index = 0; index < increments; index++) {
                g.drawLine(x1, y1, x2, y2);
                x2 += xIncrement;
                y1 -= yIncrement;
            }
        }

        private void drawNortheastQuadrant(Graphics g) {
            int x1 = margin;
            int y1 = margin;
            int x2 = width + margin;
            int y2 = margin;
            
            for (int index = 0; index < increments; index++) {
                g.drawLine(x1, y1, x2, y2);
                x1 += xIncrement;
                y2 += yIncrement;
            }
        }

        private void drawSouthwestQuadrant(Graphics g) {
            int x1 = margin;
            int y1 = height + margin;
            int x2 = margin;
            int y2 = margin;
            
            for (int index = 0; index < increments; index++) {
                g.drawLine(x1, y1, x2, y2);
                x1 += xIncrement;
                y2 += yIncrement;
            }
        }
        
        private void drawSoutheastQuadrant(Graphics g) {
            int x1 = margin;
            int y1 = height + margin;
            int x2 = width + margin;
            int y2 = height + margin;
            
            for (int index = 0; index < increments; index++) {
                g.drawLine(x1, y1, x2, y2);
                x1 += xIncrement;
                y2 -= yIncrement;
            }
        }
        
    }

}

Answer 2

When doing custom painting you should override the getPreferredSize() method so the panel can be displayed at its preferred size.

When you draw the lines two variable are the same and two variables differ. Use the width/height variable when appropriate instead of hardcoding a number. In the example below I did the left and bottom sides. The bottom side shows how to subtract. I'll let you figure out the pattern for the other two side.

Also, I made the panel a little more dynamic so it will be easy to configure the number of lines you want painted and the gap between the lines.

import java.awt.*;
import javax.swing.*;

public class DrawSSCCE extends JPanel
{
    private int lines;
    private int lineGap;

    public DrawSSCCE(int lines, int lineGap)
    {
        this.lines = lines;
        this.lineGap = lineGap;
    }

    @Override
    public Dimension getPreferredSize()
    {
        int size = lines * lineGap;
        return new Dimension(size, size);
    }

    @Override
    public void paintComponent(Graphics g)
    {
        int width = getWidth();
        int height = getHeight();

        //  Draw lines starting from left to bottom

        int x = lineGap;
        int y = 0;

        for (int i = 0; i < lines; i++)
        {
            g.drawLine(0, y, x, height);
            x += lineGap;
            y += lineGap;
        }
        //  Draw lines starting from bottom to right

        x = 0;
        y = height - lineGap;

        for (int i = 0; i < lines; i++)
        {
            g.drawLine(x, height, width, y);
            x += lineGap;
            y -= lineGap;
        }

        //  Draw lines starting from right to top

        //  Draw lines starting from top to left

    }

    private static void createAndShowUI()
    {
        JFrame frame = new JFrame("DrawSSCCE");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add( new DrawSSCCE(15, 15) );
        frame.pack();
        frame.setLocationByPlatform( true );
        frame.setVisible( true );
    }

    public static void main(String[] args)
    {
        EventQueue.invokeLater(new Runnable()
        {
            public void run()
            {
                createAndShowUI();
            }
        });
    }
}