Menu Clears Out Graphics

[Greedy thomas]

Hi There

I'm writing a graphics program. The problem I'm having is that whenever the menu drops over the graphics area, it erases the lines that I have drawn. Also when I minimize and the restore the window, all the graphics is lost. Is there something I'm missing to preserve the lines I've drawn in the graphics area.

I've included the code below. Could someone please advise me as to what to do.

Thanks in advance,
Rajesh

import java.awt.* ;
import java.awt.event.* ;
import javax.swing.* ;
 
public class testLineDraw extends JFrame {
 
Container contPane ;
Color penColor ;
Point startPt, endPt ;

public testLineDraw (String titleText) {
super(titleText) ;
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE) ;
setJMenuBar(buildMenuBar()) ;
DrawingPanel drawPanel = new DrawingPanel() ;
contPane = this.getContentPane() ;
contPane.add(drawPanel,BorderLayout.CENTER) ;
setSize(300,300) ;
setVisible(true) ;
setResizable(false) ;
setLocationRelativeTo(null) ;
 
addMouseListener(new MouseAdapter() {
public void mousePressed(MouseEvent me) {
startPt = me.getPoint() ;
}
}) ;
 
addMouseMotionListener(new MouseMotionAdapter() {
public void mouseDragged(MouseEvent me) {
endPt = me.getPoint() ;
Graphics grafx = getGraphics() ;
grafx.setColor(penColor) ;
grafx.drawLine(startPt.x, startPt.y, endPt.x, endPt.y) ;
startPt = endPt ;
}
}) ;
 
}
 
public class DrawingPanel extends JPanel {
public DrawingPanel() {
setBackground(Color.WHITE) ;
setBorder(BorderFactory.createTitledBorder("Drawing Panel")) ;
}

public void paintComponent(Graphics grafx) {
super.paintComponent(grafx) ;
}
}

public JMenuBar buildMenuBar() {
  JMenuBar aMenuBar = new JMenuBar() ;
  JMenu fileMenu = new JMenu("File") ;
  JMenu colorsMenu = new JMenu("Colors") ;
  JMenuItem openItem = new JMenuItem("Open") ;
  JMenuItem saveItem = new JMenuItem("Save") ;
  JMenuItem exitItem = new JMenuItem("Exit") ;
  JMenuItem colorRedItem = new JMenuItem("Red") ;
  JMenuItem colorBlueItem = new JMenuItem("Blue") ;
  JMenuItem colorGreenItem = new JMenuItem("Green") ;
  JMenuItem colorYellowItem = new JMenuItem("Yellow") ;
  JMenuItem colorMagentaItem = new JMenuItem("Magenta") ;
 
  fileMenu.setMnemonic(KeyEvent.VK_F) ;
  colorsMenu.setMnemonic(KeyEvent.VK_C) ;
  openItem.setMnemonic(KeyEvent.VK_O) ;
  saveItem.setMnemonic(KeyEvent.VK_S) ;
  exitItem.setMnemonic(KeyEvent.VK_X) ;
  colorRedItem.setMnemonic(KeyEvent.VK_R) ;
  colorBlueItem.setMnemonic(KeyEvent.VK_B) ;
  colorGreenItem.setMnemonic(KeyEvent.VK_G) ;
  colorYellowItem.setMnemonic(KeyEvent.VK_Y) ;
  colorMagentaItem.setMnemonic(KeyEvent.VK_M) ;
 
openItem.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae) {
System.out.println("Menu Option : File --> Open -- Chosen...") ;
}
}) ;
 
saveItem.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae) {
System.out.println("Menu Option : File --> Save") ;
}
}) ;
 
exitItem.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae) {
dispose() ;
System.exit(0) ;
}
}) ;
 
colorRedItem.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae) {
penColor = Color.RED ;
}
} ) ;
 
colorBlueItem.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae) {
penColor = Color.BLUE ;
}
} ) ;
 
colorGreenItem.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae) {
penColor = Color.GREEN ;
}
}) ;
 
colorYellowItem.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae) {
penColor = Color.YELLOW ;
}
}) ;
 
colorMagentaItem.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae) {
penColor = Color.MAGENTA ;
}
}) ;
 
fileMenu.add(openItem) ;
fileMenu.add(saveItem) ;
fileMenu.addSeparator() ;
fileMenu.add(exitItem) ;
colorsMenu.add(colorRedItem) ;
colorsMenu.add(colorBlueItem) ;
colorsMenu.add(colorGreenItem) ;
colorsMenu.add(colorYellowItem) ;
colorsMenu.add(colorMagentaItem) ;
 
aMenuBar.add(fileMenu) ;
aMenuBar.add(colorsMenu) ;
 
return aMenuBar ;
}

public static void main (String[] args) {
new testLineDraw("Line Drawing using Mouse") ;
}
 
}

[Ben Buchli]

check out the answer from ernest and craig in this post. This will solve your problem.

[Dirk Schreckmann]

Moving this to the Swing / JFC / AWT forum...

[Greedy thomas]

Thanks Ben for your reply.

I do have the steps that was listed in the thread you had kindly directly me to. However, my problem is not that I cannot draw graphics. That I can do. My problem is that once I have drawn the graphics and then bring up the menu, the area that the menu occupied on the graphics gets cleared. Also, if you minimize and then restore the window, the graphics is cleared.

Any other suggestions would be most welcome.

Regards,
Rajesh

[Craig Wood]

Painting seems easy at first, and it really is, but there are some seemingly small details that require attention to insure success.
Comments:
In your app you are using getGraphics to access the graphics context of the JFrame for painting. This is not recommended.

Swing decides on its own when to repaint your gui. This can happen at any time and certainly after minimize/restore or re–exposure from beneath other apps.

During each of these episodes your painting code will be properly rendered only if Swing can get to it in this chain of paint calls.

Since getGraphics is only called in your event code it is not rendered during these Swing–initiated repaints.

This is why it is recommended that all painting code be in or originate from the paintComponent method (in Swing).

Trying to paint in the graphics context of a container such as JFrame is not a preferred practice. The paint method in JFrame will paint over everything in the JFrame (see api). Sometimes this is what you need to do but it requires care. The preferred way is to do the painting in a JComponent (JPanels are handy) and add this to your gui container.

The strategy for painting is fairly simple. Put everything in paintComponent that you want to be painted. Let the enclosing class keep state for any variables (like color, size, position) that you want to manipulate and update/display in your painting code. Manipulate these variables from your event code.

Keeping the event–related code separate from the paint–related code will make it easier to understand and write the code that does what you want. This sounds like a cliche but look at the class design/structure in the app below. One class paints graphics. Another class arranges and handles all the user interaction with the app and the subsequent manipulation of variables in the painting class. The challenge with this approach is in deciding how you want the two to communicate with one another.

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import javax.swing.*;
import javax.swing.event.*;
 
public class PaintingTest
{
    public static void main(String[] args)
    {
        PaintingPanel panel = new PaintingPanel();
        PaintingAction action = panel.action;
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(action.getTopPanel(), "North");
        f.getContentPane().add(panel);
        f.getContentPane().add(action.getColorPanel(), "South");
        f.setSize(400,400);
        f.setLocation(200,200);
        f.setVisible(true);
    }
}
 
class PaintingPanel extends JPanel
{
    int dia;                  // these instance variables
    Color color;              // are manipulated from
    boolean isSelected;       // event code in
    Ellipse2D ball;           // PaintingAction
    Color selectedColor;
    boolean firstTime;
    PaintingAction action;
 
    public PaintingPanel()
    {
        isSelected = false;
        ball = new Ellipse2D.Double();
        selectedColor = new Color(100,200,175);
        firstTime = true;
        setBackground(Color.white);
        action = new PaintingAction(this);
        addMouseListener(action);
        addMouseMotionListener(action);
        addComponentListener(new ComponentAdapter()
        {
            public void componentResized(ComponentEvent e)
            {
                firstTime = true;
            }
        });
    }
 
    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();
        if(firstTime)
            initBall(w, h);
        if(isSelected)
        {
            g2.setPaint(selectedColor);
            double cx = ball.getCenterX();
            double cy = ball.getCenterY();
            double diam = dia + 6;           // magic number: border width = 3
            g2.fill(new Ellipse2D.Double(cx - diam/2, cy - diam/2, diam, diam));
        }
        g2.setPaint(color);
        g2.fill(ball);
    }
 
    /**
     * For initial showing and after resizing events.
     */
    private void initBall(int w, int h)
    {
        int x = w/4;
        int y = h/2;
        dia = Math.min(w, h)/6;
        ball.setFrameFromCenter(x, y, x + dia/2 - 1, y + dia/2 - 1);
        color = Color.red;
        action.initSpinnerModel(w, h, dia);  // set JSpinner values in PaintingAction
        firstTime = false;
    }
 
    public Ellipse2D getBall()
    {
        return ball;
    }
 
    public void moveBall(double x, double y)
    {
        ball.setFrameFromCenter(x, y, x + dia/2 - 1, y + dia/2 - 1);
        repaint();
    }
 
    public void setColor(Color c)
    {
        color = c;
        repaint();
    }
 
    public void setSelected(boolean selected)
    {
        isSelected = selected;
        repaint();
    }
 
    public void setDiameter(int diameter)
    {
        dia = diameter;
        double x = ball.getCenterX();
        double y = ball.getCenterY();
        ball.setFrameFromCenter(x, y, x + dia/2 - 1, y + dia/2 - 1);
        repaint();
    }
}
 
/**
 * Handles all UI events, sets instance variables in PaintingPanel.
 */
class PaintingAction extends MouseInputAdapter
{
    PaintingPanel paintPanel;
    SpinnerNumberModel model;
    Point2D.Double offset;
    boolean dragging;
 
    public PaintingAction(PaintingPanel pp)
    {
        paintPanel = pp;
        offset = new Point2D.Double();
        dragging = false;
    }
 
    public void mousePressed(MouseEvent e)
    {
        Point p = e.getPoint();
        Ellipse2D ball = paintPanel.getBall();
        if(ball.contains(p.x, p.y))
        {
            offset.x = p.x - ball.getCenterX();
            offset.y = p.y - ball.getCenterY();
            paintPanel.setSelected(true);
            dragging = true;
        }
    }
 
    public void mouseReleased(MouseEvent e)
    {
        dragging = false;
        paintPanel.setSelected(false);
    }
 
    public void mouseDragged(MouseEvent e)
    {
        if(dragging)
        {
            double x = e.getX() - offset.x;
            double y = e.getY() - offset.y;
            paintPanel.moveBall(x, y);
        }
    }
 
    /**
     * UI panel for north section of GUI.
     */
    public JPanel getTopPanel()
    {
        model = new SpinnerNumberModel(50, 25, 100, 1);
        JSpinner spinner = new JSpinner(model);
        spinner.addChangeListener(new ChangeListener()
        {
            public void stateChanged(ChangeEvent e)
            {
                int value = model.getNumber().intValue();
                paintPanel.setDiameter(value);
            }
        });
        JPanel panel = new JPanel();
        panel.add(new JLabel("diameter"));
        panel.add(spinner);
        return panel;
    }
 
    /**
     * Sets SpinnerNumberModel value and maximum for
     * initial showing and after all resize events.
     */
    public void initSpinnerModel(int w, int h, int dia)
    {
        int max = Math.min(w, h);
        model.setMaximum(new Integer(max));
        model.setValue(new Integer(dia));
    }
 
    /**
     * UI panel for south section of GUI.
     */
    public JPanel getColorPanel()
    {
        Color[] colors = {
            Color.red, Color.pink, Color.blue, Color.orange
        };
        ActionListener l = new ActionListener()
        {
            public void actionPerformed(ActionEvent e)
            {
                JButton button = (JButton)e.getSource();
                paintPanel.setColor(button.getBackground());
            }
        };
        JButton[] buttons = new JButton[4];
        JPanel panel = new JPanel(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.insets = new Insets(2,0,2,0);
        gbc.weightx = 1.0;
        for(int j = 0; j < buttons.length; j++)
        {
            buttons[j] = new JButton(" ");
            buttons[j].setBackground(colors[j]);
            buttons[j].setPreferredSize(
                           new Dimension(65, buttons[j].getPreferredSize().height));
            buttons[j].addActionListener(l);
            panel.add(buttons[j], gbc);
        }
        return panel;
    }
}

[ June 26, 2004: Message edited by: Craig Wood ]

[Ben Buchli]

Thanks for stepping in here, Craig!
Great contribution, thanks a lot!

Ben

[Greedy thomas]

Thanks Craig for your reply.

I understand what you are saying but still not sure where to make the changes to my code. I suppose I must still try tinkering around with this one.

Regards,
Rajesh

[David Weitzman]

I would strongly recommend following Craig's advice and implementing a paintComponent() method, for the record I'd like to point out another technique you can use. Try replacing DrawingPlanel with this version, also deleting the original mouse listener which has been moved into the drawing panel:

    public class DrawingPanel extends JLabel {
        private Image _image;
        Point startPt;
 
        public void setBounds(int x, int y, int width, int height) {
            super.setBounds(x, y, width, height);
 
            Image newImage = createImage(getWidth() - getInsets().right - getInsets().left,
                    getHeight() - getInsets().bottom - getInsets().top);
            if (_image != null)
                newImage.getGraphics().drawImage(_image, 0, 0, this);
            _image = newImage;
            setIcon(new ImageIcon(_image));
        }
 
        public DrawingPanel() {
            setBorder(BorderFactory.createTitledBorder("Drawing Panel"));
 
            addMouseListener(new MouseAdapter() {
                public void mousePressed(MouseEvent me) {
                    startPt = me.getPoint();
                    startPt.translate(-getInsets().left, -getInsets().top);
                }
            });
 
            addMouseMotionListener(new MouseMotionAdapter() {
                public void mouseDragged(MouseEvent me) {
                    Point endPt = me.getPoint();
                    endPt.translate(-getInsets().left, -getInsets().top);
                    Graphics grafx = _image.getGraphics();
                    grafx.setColor(penColor);
                    grafx.drawLine(startPt.x, startPt.y, endPt.x, endPt.y);
                    grafx.dispose();
                    repaint(getInsets().left + Math.min(startPt.x, endPt.x),
                            getInsets().top + Math.min(startPt.y, endPt.y), Math.abs(startPt.x - endPt.x) + 1,
                            Math.abs(startPt.y - endPt.y) + 1);
                    startPt = endPt;
                }
            });
        }
 
    }
 

You've disabled resizing, although this code will work after resizing with the caveat that when you make it smaller the stuff off the edge is lost.

[Craig Wood]

Additional comments:
Added state to the DrawingPanel class in the form of two ArrayLists: one for the temporary, current–time
drawing and the other for all previously–drawn lines.

Added repaint calls in JMenuItem listeners to update the view for changes in penColor.

import java.awt.* ;
import java.awt.event.* ;
import java.awt.geom.*;
import java.util.*;
import java.util.List;
import javax.swing.* ;
import javax.swing.event.*;
 
public class TestDraw extends JFrame {
    Container contPane ;
    Color penColor ;
 
    public TestDraw (String titleText) {
        super(titleText) ;
        penColor = Color.black;
        setDefaultCloseOperation(EXIT_ON_CLOSE) ;
        setJMenuBar(buildMenuBar()) ;
        DrawingPanel drawPanel = new DrawingPanel() ;
        contPane = this.getContentPane() ;
        contPane.add(drawPanel,BorderLayout.CENTER) ;
        setSize(300,300) ;
        setVisible(true) ;
        setResizable(false) ;
        setLocationRelativeTo(null) ;
    }
 
    public class DrawingPanel extends JPanel {
        List liveList, lineList;
 
        public DrawingPanel() {
            liveList = new ArrayList();
            lineList = new ArrayList();
            DrawingController controller = new DrawingController(this);
            addMouseListener(controller);
            addMouseMotionListener(controller);
            setBackground(Color.WHITE) ;
            setBorder(BorderFactory.createTitledBorder("Drawing Panel")) ;
        }
 
        public void paintComponent(Graphics grafx) {
            super.paintComponent(grafx) ;
            Graphics2D g2 = (Graphics2D)grafx;
            g2.setPaint(penColor) ;
            for(int j = 0; j < liveList.size(); j++)
                g2.draw((Line2D)liveList.get(j));
            for(int j = 0; j < lineList.size(); j++)
                g2.draw((Line2D)lineList.get(j));
        }
 
        public List getLiveList() {
            return liveList;
        }
 
        public List getLineList() {
            return lineList;
        }
 
        // this will clear your drawing panel of lines
        public void clear() {
            liveList.clear();
            lineList.clear();
            repaint();
        }
    }
 
    class DrawingController extends MouseInputAdapter {
        DrawingPanel drawingPanel;
        Point startPt, endPt ;
        boolean dragging;
 
        public DrawingController(DrawingPanel dp) {
            drawingPanel = dp;
            startPt = new Point();
            endPt = new Point();
            dragging = false;
        }
 
        public void mousePressed(MouseEvent me) {
            startPt = me.getPoint() ;
            dragging = true;
        }
 
        public void mouseReleased(MouseEvent e) {
            List list = drawingPanel.getLiveList();
            drawingPanel.getLineList().addAll(list);
            list.clear();
            repaint();
            dragging = false;
        }
 
        public void mouseDragged(MouseEvent me) {
            if(dragging) {
                endPt = me.getPoint() ;
                drawingPanel.getLiveList().add(new Line2D.Double(startPt, endPt));
                repaint();
                startPt = endPt ;
            }
        }
    }
 
    public JMenuBar buildMenuBar() {
        JMenuBar aMenuBar = new JMenuBar() ;
        JMenu fileMenu = new JMenu("File") ;
        JMenu colorsMenu = new JMenu("Colors") ;
        JMenuItem openItem = new JMenuItem("Open") ;
        JMenuItem saveItem = new JMenuItem("Save") ;
        JMenuItem exitItem = new JMenuItem("Exit") ;
        JMenuItem colorRedItem = new JMenuItem("Red") ;
        JMenuItem colorBlueItem = new JMenuItem("Blue") ;
        JMenuItem colorGreenItem = new JMenuItem("Green") ;
        JMenuItem colorYellowItem = new JMenuItem("Yellow") ;
        JMenuItem colorMagentaItem = new JMenuItem("Magenta") ;
 
        fileMenu.setMnemonic(KeyEvent.VK_F) ;
        colorsMenu.setMnemonic(KeyEvent.VK_C) ;
        openItem.setMnemonic(KeyEvent.VK_O) ;
        saveItem.setMnemonic(KeyEvent.VK_S) ;
        exitItem.setMnemonic(KeyEvent.VK_X) ;
        colorRedItem.setMnemonic(KeyEvent.VK_R) ;
        colorBlueItem.setMnemonic(KeyEvent.VK_B) ;
        colorGreenItem.setMnemonic(KeyEvent.VK_G) ;
        colorYellowItem.setMnemonic(KeyEvent.VK_Y) ;
        colorMagentaItem.setMnemonic(KeyEvent.VK_M) ;
 
        openItem.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent ae) {
                System.out.println("Menu Option : File --> Open -- Chosen...") ;
            }
        });
 
        saveItem.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent ae) {
                System.out.println("Menu Option : File --> Save") ;
            }
        });
 
        exitItem.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent ae) {
                dispose() ;
                System.exit(0) ;
            }
        });
 
        colorRedItem.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent ae) {
                penColor = Color.RED ;
                repaint();
            }
        });
 
        colorBlueItem.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent ae) {
                penColor = Color.BLUE ;
                repaint();
            }
        });
 
        colorGreenItem.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent ae) {
                penColor = Color.GREEN ;
                repaint();
            }
        });
 
        colorYellowItem.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent ae) {
                penColor = Color.YELLOW ;
                repaint();
            }
        });
 
        colorMagentaItem.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent ae) {
                penColor = Color.MAGENTA ;
                repaint();
            }
        });
 
        fileMenu.add(openItem) ;
        fileMenu.add(saveItem) ;
        fileMenu.addSeparator() ;
        fileMenu.add(exitItem) ;
        colorsMenu.add(colorRedItem) ;
        colorsMenu.add(colorBlueItem) ;
        colorsMenu.add(colorGreenItem) ;
        colorsMenu.add(colorYellowItem) ;
        colorsMenu.add(colorMagentaItem) ;
 
        aMenuBar.add(fileMenu) ;
        aMenuBar.add(colorsMenu) ;
 
        return aMenuBar ;
   }
 
    public static void main (String[] args) {
        new TestDraw("Line Drawing using Mouse") ;
    }
}

[ June 29, 2004: Message edited by: Craig Wood ]