Lesson 34: Layering Images with Java GUI

The FlowLayout RECAP

The LEFT and CENTER layout // FlowLayoutTest.java - demo flowlayout import java.awt.*; import javax.swing.*; class FlowLayoutTest{ public static void main (String[] args){ JFrame frame = new JFrame("FlowLayoutTest.LEFT"); Container pane = frame.getContentPane(); pane.setLayout(new FlowLayout(FlowLayout.LEFT)); pane.add(new JButton("Button 1")); pane.add(new JLabel("Label 2")); pane.add(new JButton("Button 3")); pane.add(new JLabel("Label 4")); pane.add(new JButton("Button 5")); frame.pack(); frame.show(); } CENTER LEFT RECAP

Adding buttons to actions and frames -with a FlowLayout RECAP

Adding a button to StartTest // StarTestQuit.java - add a quit button to StartTest import java.awt.*; import javax.swing.*; class StarTestQuit{ public static void main (String[] args){ JFrame frame = new JFrame("StartTest"); Container pane = frame.getContentPane(); Star star = new Star(); JButton Quit = new JButton("Quit"); pane.setLayout(new FlowLayout()); Quit.addActionListener(new GoodBye()); pane.add(Quit); pane.add(star); frame.pack(); frame.show(); } RECAP

A simple Drawing program RECAP

// SimplePaint.java - drawing with a mouse import java.awt.*; import javax.swing.*; class SimplePaint{ public static void main (String[] args){ JFrame frame = new JFrame("SimplePaint"); Container pane = frame.getContentPane(); DrawingCanvas canvas = new DrawingCanvas(); PaintListener listener=new PaintListener(); canvas.addMouseMotionListener(listener); pane.add(canvas); frame.pack(); frame.show(); } RECAP

// DrawingCanvas.java - a blank canvas import javax.swing.*; import java.awt.*; class DrawingCanvas extends JComponent{ public Dimension getMinimumSize(){ return new Dimension(SIZE, SIZE); } public Dimension getPreferredSize(){ return new Dimension(SIZE, SIZE); } private static final int SIZE=500; } RECAP

// PaintListener.java import java.awt.*; import java.awt.event.*; class PaintListener implements MouseMotionListener{ public void mouseDragged(MouseEvent e) { DrawingCanvas canvas = (DrawingCanvas)e.getSource(); Graphics g = canvas.getGraphics(); g.fillOval(e.getX()-radius, e.getY() - radius, diameter, diameter); } public void mouseMoved(MouseEvent e){} private int radius =3; private int diameter = radius*2; } Each time the mouse is moved – while the position of the over the component that is being listened to, the mouseDragged() method is called. Each change in position detected by the system generates another call to mouseDragged(). This results in many calls by a single dragging of the mouse. Each call is passed a a MouseEvent object that contains, among other things, a reference to the component that generated the event and the coordinates of the mouse at that time the event was generated. The calls e.getSource() returns a generic reference to the component that generated the event. In general the event could have come from any component not just DrawingCanvas. Here it is explicitly cast to the reference a DrawingCanvas object RECAP

The outcome RECAP

Some problems with our simple drawing program…

Everytime a window is placed over the drawing, the text that was overlapped is removed when the window becomes active again (let us take a look)

Everytime a window is placed over the drawing, the text that was overlapped is removed when the window becomes active again

The Problem is that the image is drawn only once and only on the visible window. What we need is a “shadow” offscreenImage we can call when the frame gets back the focus. In this example we will see how we can modify our paint program to accomplish this! The Problem

// PaintListener2.java - paints on a DrwaingCanvas2 // and it is associated with an offscreenImage. import java.awt.*; import java.awt.event.*; class PaintListener2 implements MouseMotionListener{ public void mouseDragged(MouseEvent e) { DrawingCanvas2 canvas = (DrawingCanvas2)e.getSource(); Graphics g = canvas.getGraphics(); g.fillOval(e.getX()-radius, e.getY() - radius, diameter, diameter); // duplicating the drawing on the offscreenImage Image image= canvas.getOffscreenImage(); g = image.getGraphics(); g.fillOval(e.getX()-radius, e.getY() - radius, diameter, diameter); } public void mouseMoved(MouseEvent e){} protected int radius =3; protected int diameter = radius*2; } Importing libraries This class implements the interface MouseMotionListener The interface MouseMotionListener requires that two methods are implemented: 1)mouseDragged (button clicked and held down) 2)mouseMoved (no button clicked and held down)

// PaintListener2.java - paints on a DrwaingCanvas2 // and it is associated with an offscreenImage. import java.awt.*; import java.awt.event.*; class PaintListener2 implements MouseMotionListener{ public void mouseDragged(MouseEvent e) { DrawingCanvas2 canvas = (DrawingCanvas2)e.getSource(); Graphics g = canvas.getGraphics(); g.fillOval(e.getX()-radius, e.getY() - radius, diameter, diameter); // duplicating the drawing on the offscreenImage Image image= canvas.getOffscreenImage(); g = image.getGraphics(); g.fillOval(e.getX()-radius, e.getY() - radius, diameter, diameter); } public void mouseMoved(MouseEvent e){} protected int radius =3; protected int diameter = radius*2; }

// PaintListener2.java - paints on a DrwaingCanvas2 // and it is associated with an offscreenImage. import java.awt.*; import java.awt.event.*; class PaintListener2 implements MouseMotionListener{ public void mouseDragged(MouseEvent e) { DrawingCanvas2 canvas = (DrawingCanvas2)e.getSource(); Graphics g = canvas.getGraphics(); g.fillOval(e.getX()-radius, e.getY() - radius, diameter, diameter); // duplicating the drawing on the offscreenImage Image image= canvas.getOffscreenImage(); g = image.getGraphics(); g.fillOval(e.getX()-radius, e.getY() - radius, diameter, diameter); } public void mouseMoved(MouseEvent e){} protected int radius =3; protected int diameter = radius*2; } Each time the mouse is moved – while the position of the over the component that is being listened to, the mouseDragged() method is called. Each change in position detected by the system generates another call to mouseDragged(). This results in many calls by a single dragging of the mouse. Each call is passed a a MouseEvent object that contains, among other things, a reference to the component that generated the event and the coordinates of the mouse at that time the event was generated. Drawing to both the offscreenimage and the canvas!!

Importing the libraries Creating a class called SimplePaint2 Creating a main section Creating a frame named frame and labeled SimplePaint Creating a container named pane, and associating it with our frame called frame. // SimplePaint2.java - drawing with a mouse import java.awt.*; import javax.swing.*; class SimplePaint2{ public static void main (String[] args){ JFrame frame = new JFrame("SimplePaint"); Container pane = frame.getContentPane(); DrawingCanvas2 canvas = new DrawingCanvas2(); PaintListener2 listener=new PaintListener2(); canvas.addMouseMotionListener(listener); pane.add(canvas); frame.pack(); frame.show(); }

// SimplePaint2.java - drawing with a mouse import java.awt.*; import javax.swing.*; class SimplePaint2{ public static void main (String[] args){ JFrame frame = new JFrame("SimplePaint"); Container pane = frame.getContentPane(); DrawingCanvas2 canvas = new DrawingCanvas2(); PaintListener2 listener=new PaintListener2(); canvas.addMouseMotionListener(listener); pane.add(canvas); frame.pack(); frame.show(); } Creating a new object named canvas based on the DrawingCanvas2 class (we will look at it later) Creating a listener based on the PainListener2 class Associating the listener to the canvas

// SimplePaint2.java - drawing with a mouse import java.awt.*; import javax.swing.*; class SimplePaint2{ public static void main (String[] args){ JFrame frame = new JFrame("SimplePaint"); Container pane = frame.getContentPane(); DrawingCanvas2 canvas = new DrawingCanvas2(); PaintListener2 listener=new PaintListener2(); canvas.addMouseMotionListener(listener); pane.add(canvas); frame.pack(); frame.show(); } Adding the canvas object to the container Showing the frame Packing the frame to smallest size

// DrawingCanvas2.java - a blank canvas that remembers // drawing operations using an offscreen image import javax.swing.*; import java.awt.*; class DrawingCanvas2 extends JComponent{ public void paint(Graphics g){ if (offscreenImage!=null) g.drawImage(offscreenImage,0,0,SIZE,SIZE,null); } public Image getOffscreenImage(){ if (offscreenImage==null) offscreenImage=createImage(SIZE,SIZE); return offscreenImage; } public Dimension getMinimumSize(){ return new Dimension(SIZE, SIZE); } public Dimension getPreferredSize(){ return new Dimension(SIZE, SIZE); } private static final int SIZE=500; private Image offscreenImage; } Importing libraries This class is an extension of the JComponent class from the swing library

// DrawingCanvas2.java - a blank canvas that remembers // drawing operations using an offscreen image import javax.swing.*; import java.awt.*; class DrawingCanvas2 extends JComponent{ public void paint(Graphics g){ if (offscreenImage!=null) g.drawImage(offscreenImage,0,0,SIZE,SIZE,null); } public Image getOffscreenImage(){ if (offscreenImage==null) offscreenImage=createImage(SIZE,SIZE); return offscreenImage; } public Dimension getMinimumSize(){ return new Dimension(SIZE, SIZE); } public Dimension getPreferredSize(){ return new Dimension(SIZE, SIZE); } private static final int SIZE=500; private Image offscreenImage; } The first parameter for drawImage is a reference to the offscreenimage. The next two are the coordinates where the image should be placed on the canvas (we are filling the canvas from 0,0). The next is the width and the height of the image (in our case the size of the canvas). If anything has been drawn, and offscreenImage has been created. The method paint() calls g.drawImage() to transfer the offscreen memory image to the computer screen. Manipulating this we can stretch and move the image!!

// DrawingCanvas2.java - a blank canvas that remembers // drawing operations using an offscreen image import javax.swing.*; import java.awt.*; class DrawingCanvas2 extends JComponent{ public void paint(Graphics g){ if (offscreenImage!=null) g.drawImage(offscreenImage,0,0,SIZE,SIZE,null); } public Image getOffscreenImage(){ if (offscreenImage==null) offscreenImage=createImage(SIZE,SIZE); return offscreenImage; } public Dimension getMinimumSize(){ return new Dimension(SIZE, SIZE); } public Dimension getPreferredSize(){ return new Dimension(SIZE, SIZE); } private static final int SIZE=500; private Image offscreenImage; } This method is used by the listener to get a reference to the image, so we can draw on it. Private instance variable The first time getOffscreenImage () is called, the offscreen image is created by calling createImage(). The method createImage() is implicitly defined for DrawingCanvas2 because it extends Jcomponent and createImage() is defined there. We placed createImage() here instead of in the Drawingcanvas2 constructor because at the time the constructor is called Jcomponent may not be ready to create an offscreen image. Once the Jcomponent has been displayed in show(), we can create the offscreenImage.

// DrawingCanvas2.java - a blank canvas that remembers // drawing operations using an offscreen image import javax.swing.*; import java.awt.*; class DrawingCanvas2 extends JComponent{ public void paint(Graphics g){ if (offscreenImage!=null) g.drawImage(offscreenImage,0,0,SIZE,SIZE,null); } public Image getOffscreenImage(){ if (offscreenImage==null) offscreenImage=createImage(SIZE,SIZE); return offscreenImage; } public Dimension getMinimumSize(){ return new Dimension(SIZE, SIZE); } public Dimension getPreferredSize(){ return new Dimension(SIZE, SIZE); } private static final int SIZE=500; private Image offscreenImage; } Setting our preferred and minimum size to the container manager Private protected variable

The outcome

Lessons Learned