Transcript Canvas

Canvas and Graphics
CS 21a
Drawing your own stuff


Java provides a Component that allows you to
draw on the screen -- Canvas
You can draw things like




Basic shapes – rectangles, ovals, polygons, lines
Text – various font types
Images -- .GIF, .JPG, .PNG
This is essential to making your own games or
your own components
9/26/2005
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
L17: Canvas
Slide 2
Canvas

Canvas, like JApplet or JFrame, must be
extended in order to be used




Need to override the paint() method
Signature: public void paint( Graphics g )
Inside the paint() method, invoke drawing
commands on the Graphics object
Once created, the Canvas class must be
instantiated and added to the content
pane of the JApplet/JFrame
9/26/2005
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
L17: Canvas
Slide 3
Example: FaceCanvas
import java.awt.*;
import javax.swing.*;
import java.awt.*;
public class FaceCanvas extends Canvas
{
private int xpos;
private int ypos;
public FaceCanvas()
{
setBackground( Color.blue );
setSize( 300, 300 );
xpos = 50;
ypos = 50;
}
public void paint( Graphics g )
{
g.drawOval( xpos, ypos, 15, 15 ); //head
g.drawLine( xpos + 5, ypos + 10,
xpos + 10, ypos + 10 ); // mouth
}
}
9/26/2005
public class FaceFrame extends JFrame
{
private FaceCanvas myCanvas;
public FaceFrame()
{
myCanvas = new FaceCanvas();
Container c = getContentPane();
c.setLayout( new FlowLayout() );
c.add( myCanvas );
}
}
Extend Canvas
and override
paint() method
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
Instantiate and
add Canvas
object to Frame
or Applet
L17: Canvas
Slide 4
Graphics


This class is what is used to create drawings on
the Canvas
The Graphics class can do the following






9/26/2005
set the current drawing color -> g.setColor(…)
draw lines -> g.drawLine( … )
draw outline rectangles/ovals/polygons ->
g.drawRect( … ), g.drawOval( … )
draw filled rectangles/ovals/polygons ->
g.fillRect( … ), g.fillOval( … )
draw text
draw images
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
L17: Canvas
Slide 5
Buttons and animation

It can be arranged so that button actions cause
the drawing on the canvas to be updated


Through the actionPerformed() method
What to do:

Add a method in your canvas class that updates its
drawing attributes (xpos & ypos, in the example)


9/26/2005
Call repaint() after updating the drawing attributes (causes
paint() to be called, and the canvas is refreshed)
Call that method when a button is clicked
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
L17: Canvas
Slide 6
…
public class FaceFrame extends JFrame
implements ActionListener
{
private JButton move;
private FaceCanvas myCanvas;
public FaceFrame()
{
move = new JButton( "Move" );
myCanvas = new FaceCanvas();
Container c = getContentPane();
c.setLayout( new FlowLayout() );
c.add( move );
c.add( myCanvas );
move.addActionListener( this );
}
public void actionPerformed( ActionEvent ae )
{
if ( ae.getSource() == move )
{
myCanvas.moveRight();
}
}
import java.awt.*;
public class FaceCanvas extends Canvas
{
private int xpos;
private int ypos;
…
public void moveRight()
{
xpos += 5;
repaint();
}
public void paint( Graphics g )
{
g.drawOval( xpos, ypos, 15, 15 ); //head
g.drawLine( xpos + 5, ypos + 10,
xpos + 10, ypos + 10 ); // mouth
}
}
}
9/26/2005
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
L17: Canvas
Slide 7
Encapsulating shapes


Particularly if the canvas contains many shapes,
it is better (and more object-oriented) to define
classes for the shapes to be drawn
The canvas class becomes a container or
aggregate of the shape(s)



9/26/2005
Shape objects are created inside the canvas class
The paint() method contains calls to methods that
draw the shapes
Drawing details are encapsulated in shape class
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
L17: Canvas
Slide 8
import java.awt.*;
import java.awt.*;
public class FaceCanvas extends Canvas
{
private Face face;
public class Face
{
private int xpos;
private int ypos;
public FaceCanvas()
{
setBackground( Color.blue );
setSize( 300, 300 );
face = new Face( 50, 50 );
}
public Face( int x, int y )
{
xpos = x;
ypos = y;
}
public void moveRight()
{
face.moveRight();
repaint();
}
public void moveRight()
{
xpos += 5;
}
public void draw( Graphics g )
{
g.drawOval( xpos, ypos, 15, 15 );
g.drawLine( xpos + 5, ypos + 10,
xpos + 10, ypos + 10 );
}
public void paint( Graphics g )
{
face.draw( g );
}
}
}
9/26/2005
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
L17: Canvas
Slide 9
Benefits of encapsulation




With this new design, it is easier to display
similar shapes in the canvas
Code is more organized, java source files are
shorter
Can add other kinds of shapes into the canvas
while keeping all other classes manageably short
Can use arrays (or ArrayLists) and inheritance to
maintain the different shape objects and apply
drawing changes in a uniform way to these
objects
9/26/2005
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
L17: Canvas
Slide 10
More about Graphics



Color
Fonts
Images
9/26/2005
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
L17: Canvas
Slide 11
Colors

Basic shapes, text and lines use the current color


Colors can be taken from a list of constants in the Color
class


this can be changed using setColor(Color c) in the Graphics class
e.g. Color.black, Color.white, etc.
Colors can also be created using Red, Green, Blue
components via following constructor

Color(int red, int green, int blue)


9/26/2005
e.g. Color c = new Color(128,0,128)
the values of red, green, blue must each be from 0-255
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
L17: Canvas
Slide 12
Fonts

Text drawing using drawString() uses the
current color and the current font


this can be changed using setFont(Font f) in
the Graphics class
Font object are obtained using a String
describing the font via following
constructor

9/26/2005
Font(String name, int style, int size)
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
L17: Canvas
Slide 13
Fonts

The following styles are available





Font.PLAIN
Font.BOLD
FONT.ITALIC
these can be combined using the | operator
Examples:


9/26/2005
Font f = new Font ("ArialBlack", Font.ITALIC |
Font.BOLD, 36)
Font f = new Font (“Times New Roman", Font.BOLD,
12)
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
L17: Canvas
Slide 14
Images (optional)

Images are important for any applications to
make it appealing to the eye


In order to load images one needs to import the
following packages




e.g. for games or colorful GUIs
import java.awt.image.*;
import javax.imageio.*;
import java.io.*;
Sample code: ImageApplet and ImageCanvas
9/26/2005
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
L17: Canvas
Slide 15
ImageIO


The ImageIO package is a new package in Java related
purely with loading and saving images of different
formats.
It automatically detects the format of the image file
you intend to load


no need to specify the exact format
all you need to do is use the read(URL url) method



A URL is a special way of representing where a resource can be
found, e.g. a file in a directory or a file on the Internet
BufferedImage img =
ImageIO.read(getClass().getResource(filename))
ImageIO.read() returns an object of type BufferedImage
which can be drawn using Graphics.drawImage()
methods
9/26/2005
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
L17: Canvas
Slide 16
ImageIO Example
import javax.swing.*;
import javax.swing.event.*;
import java.awt.*;
import java.awt.image.*;
import javax.imageio.*;
public class ImageCanvas extends Canvas
{
BufferedImage image = null;
public ImageCanvas()
{ try
{ image = ImageIO.read(getClass().getResource("java.GIF"));
}
catch (Exception e)
{ }
}
public void paint( Graphics g )
{
g.drawImage(image, 100,100, null);
}
}
9/26/2005
Copyright 2005, by the authors of these slides, and Ateneo de
Manila University. All rights reserved
L17: Canvas
Slide 17
Exercises






Start with the second version of the FaceFrame
example
Have two faces instead of one face displayed
Arrange it so that the constructor of the Face
class includes face size as a third parameter
(have different sizes for the two faces in the
canvas)
Add a button that moves the faces to the left
Add a button that that increases the size of the
faces
Add eyes to the faces (update the draw method
of the Face
class)
L17: Canvas
Copyright 2005, by the authors of these slides, and Ateneo de
9/26/2005
Manila University. All rights reserved
Slide 18