Transcript Lesson_34_Layering_images_with_Java_GUI

Lesson 34:
Layering Images with Java GUI
RECAP
The FlowLayout
The LEFT and CENTER layout
RECAP
// FlowLayoutTest.java - demo flowlayout
CENTER
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();
}
}
LEFT
RECAP
Adding buttons to actions
and frames
-with a FlowLayout
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
RECAP
A simple Drawing
program
// 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.*;
Each time the mouse is moved – while the position of the over
the component that is being listened to, the mouseDragged()
method is called.
RECAP
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;
}
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
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 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
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!
Everytime a window is
placed over the drawing,
the text that was
overlapped is removed
when the window
becomes active again
// PaintListener2.java - paints on a DrwaingCanvas2
// and it is associated with an offscreenImage.
This class implements the
Importing libraries
interface MouseMotionListener
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;
}
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.Each time the mouse is moved – while the
position of the over the component that is
import java.awt.*;
being listened to, the mouseDragged()
import java.awt.event.*;
method is called.
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){}
Each change in position detected by the
protected int radius =3;
system generates another call to
protected int diameter = radius*2;
mouseDragged(). This results in many calls
}
Drawing to both the
offscreenimage and the canvas!!
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.
// SimplePaint2.java - drawing with a mouse
import java.awt.*;
import javax.swing.*;
Importing the libraries
Creating a class called SimplePaint2
class SimplePaint2{
Creating a main section
public static void main (String[] args){
JFrame frame = new JFrame("SimplePaint");
Container pane = frame.getContentPane();
Creating a frame
DrawingCanvas2 canvas = new DrawingCanvas2(); named frame and
labeled SimplePaint
PaintListener2 listener=new PaintListener2();
canvas.addMouseMotionListener(listener);
pane.add(canvas);
frame.pack();
frame.show();
}
}
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.*;
Creating a new object named
canvas based on the
DrawingCanvas2 class (we
will look at it later)
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 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
Packing the frame to smallest size
}
Showing the frame
// DrawingCanvas2.java - a blank canvas that remembers
// drawing operations using an offscreen image
import javax.swing.*;
import java.awt.*;
Importing
libraries
This class is an extension of
the JComponent class from
the swing library
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;
}
// DrawingCanvas2.java - a blank canvas that remembers
// drawing operations using an offscreen image
import javax.swing.*;
import java.awt.*;
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.
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;
The first parameter for drawImage is a
}
reference to the offscreenimage. The
public Dimension getMinimumSize(){
next two are the coordinates where the
return new Dimension(SIZE, SIZE);
image should be placed on the canvas
}
(we are filling the canvas from 0,0). The
public Dimension getPreferredSize(){
next is the width and the height of the
return new Dimension(SIZE, SIZE); image (in our case the size of the
}
canvas).
private static final int SIZE=500;
private Image offscreenImage;
}
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.*;
This method is used by the listener to get a
reference to the image, so we can draw on it.
class DrawingCanvas2 extends JComponent{
public void paint(Graphics g){
if (offscreenImage!=null)
g.drawImage(offscreenImage,0,0,SIZE,SIZE,null);
}
The first time getOffscreenImage () is
public Image getOffscreenImage(){
called , the offscreen image is created by
if (offscreenImage==null)
calling createImage().
offscreenImage=createImage(SIZE,SIZE);
return offscreenImage;
}
The method createImage() is implicitly
public Dimension getMinimumSize(){
defined for DrawingCanvas2 because it
return new Dimension(SIZE, SIZE);
extends Jcomponent and createImage() is
}
defined there.
public Dimension getPreferredSize(){
return new Dimension(SIZE, SIZE);
We placed createImage() here instead of in
}
the Drawingcanvas2 constructor because
private static final int SIZE=500;
at the time the constructor is called
private Image offscreenImage;
Jcomponent may not be ready to create an
}
Private instance variable
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;
}
Setting our preferred and
public Dimension getMinimumSize(){
minimum size to the container
return new Dimension(SIZE, SIZE);
manager
}
public Dimension getPreferredSize(){
return new Dimension(SIZE, SIZE);
}
Private protected variable
private static final int SIZE=500;
private Image offscreenImage;
}
The outcome
Lessons Learned