I have a TicTacToe board and I need to draw a line through the X's or O's when someone wins. I know how to use the paint method, repaint, etc (as far as how they're called & the basics). I'm just not sure how to go about actually drawing the line. I assume its by repeatedly calling repaint, but I'm unsure about the rest of the logic to actually get the line to run through the squares of the board. One way (I guess) would be to repeatedly give the method coordinates, and "dot" each coordinate until it formed a line. But I think that would be overkill . . & it would be pretty hard to get the coordinates that run through the middle of the JButtons anyway.

Recommended Answers

All 3 Replies

Also, as a side note, if anybody wants to offer their advice on this also. . How can the visible text that shows up inside a JButton be sized to span the entire button?

If you are wanting to paint the line over a grid of JButtons, you'll need to create a small component to install as the glass pane (you read about glass pane here). The code to paint the lines will go in the paintComponent() method of that class. Here is a small example of that to give you a start:

import java.awt.Color;
import java.awt.Graphics;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JComponent;

public class TicTacToe extends javax.swing.JFrame {

    public TicTacToe() {
        initComponents();
        
        // intall the OverlayPane as this frame's glass pane
        setGlassPane(new OverlayPane());
        
        // installing a listener on jButton1 to toggle 
        // the glass pane painting on/off just for an example.
        jButton1.addActionListener(new ButtonListener());
    }

    /** This component will serve as the glass pane overlay to 
     * paint over all of the other components.
     */
    class OverlayPane extends JComponent{
        /** This is an example of painting a line from button1
         * to button9 over the existing components.
         */
        protected void paintComponent(Graphics g) {
            // from center to center of buttons if you want
            // int x0 = jButton1.getX()+jButton1.getWidth()/2;
            // int y0 = jButton1.getY()+jButton1.getHeight()/2;
            // int x1 = jButton9.getX()+jButton9.getWidth()/2;
            // int y1 = jButton9.getY()+jButton9.getHeight()/2;
            
            // from corner to corner of buttons
            int x0 = jButton1.getX();
            int y0 = jButton1.getY();
            int x1 = jButton9.getX()+jButton9.getWidth();
            int y1 = jButton9.getY()+jButton9.getHeight();
            g.setColor(Color.BLACK);
            g.drawLine(x0, y0, x1, y1);            
        }
    }
    
    class ButtonListener implements ActionListener{
        public void actionPerformed(ActionEvent e) {
            // toggle line on/off
            getGlassPane().setVisible( !getGlassPane().isVisible() );
        }
    }
    
    /** Everything below here is just the code to generate a panel 
     *   that contains a 3x3 grid of JButtons. Nothing exciting.
     */

    @SuppressWarnings("unchecked")
    // <editor-fold defaultstate="collapsed" desc="Generated Code">
    private void initComponents() {

        panGrid = new javax.swing.JPanel();
        jButton1 = new javax.swing.JButton();
        jButton2 = new javax.swing.JButton();
        jButton3 = new javax.swing.JButton();
        jButton4 = new javax.swing.JButton();
        jButton5 = new javax.swing.JButton();
        jButton6 = new javax.swing.JButton();
        jButton7 = new javax.swing.JButton();
        jButton8 = new javax.swing.JButton();
        jButton9 = new javax.swing.JButton();

        setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);

        panGrid.setLayout(new java.awt.GridLayout(3, 3));

        jButton1.setText("1");
        panGrid.add(jButton1);

        jButton2.setText("2");
        panGrid.add(jButton2);

        jButton3.setText("3");
        panGrid.add(jButton3);

        jButton4.setText("4");
        panGrid.add(jButton4);

        jButton5.setText("5");
        panGrid.add(jButton5);

        jButton6.setText("6");
        panGrid.add(jButton6);

        jButton7.setText("7");
        panGrid.add(jButton7);

        jButton8.setText("8");
        panGrid.add(jButton8);

        jButton9.setText("9");
        panGrid.add(jButton9);

        getContentPane().add(panGrid, java.awt.BorderLayout.CENTER);

        pack();
    }// </editor-fold>

    /**
    * @param args the command line arguments
    */
    public static void main(String args[]) {
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                new TicTacToe().setVisible(true);
            }
        });
    }

    // Variables declaration - do not modify
    private javax.swing.JButton jButton1;
    private javax.swing.JButton jButton2;
    private javax.swing.JButton jButton3;
    private javax.swing.JButton jButton4;
    private javax.swing.JButton jButton5;
    private javax.swing.JButton jButton6;
    private javax.swing.JButton jButton7;
    private javax.swing.JButton jButton8;
    private javax.swing.JButton jButton9;
    private javax.swing.JPanel panGrid;
    // End of variables declaration

}

Also, as a side note, if anybody wants to offer their advice on this also. . How can the visible text that shows up inside a JButton be sized to span the entire button?

That's a product of the margins of the JButton. If you want to decrease that you can set a new margin like so:

jButton.setMargin(new java.awt.Insets(2, 2, 2, 2));

Thanks a lot man. Appreciated.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.