Canvas and Graphics CS 21a

9/26/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L17: Canvas Slide 2 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 3 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 4 Example: FaceCanvas import javax.swing.*; import java.awt.*; public class FaceFrame extends JFrame { private FaceCanvas myCanvas; public FaceFrame() { myCanvas = new FaceCanvas(); Container c = getContentPane(); c.setLayout( new FlowLayout() ); c.add( myCanvas ); } 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 } Instantiate and add Canvas object to Frame or Applet Extend Canvas and override paint() method

9/26/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L17: Canvas Slide 5 Graphics This class is what is used to create drawings on the Canvas The Graphics class can do the following 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

9/26/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L17: Canvas Slide 6 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) 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

9/26/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L17: Canvas Slide 7 … 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 8 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) 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

9/26/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L17: Canvas Slide 9 import java.awt.*; public class FaceCanvas extends Canvas { private Face face; public FaceCanvas() { setBackground( Color.blue ); setSize( 300, 300 ); face = new Face( 50, 50 ); } public void moveRight() { face.moveRight(); repaint(); } public void paint( Graphics g ) { face.draw( g ); } import java.awt.*; public class Face { private int xpos; private int ypos; public Face( int x, int y ) { xpos = x; ypos = y; } 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 ); }

9/26/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L17: Canvas Slide 10 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 11 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 12 Colors Basic shapes, text and lines use the current color this can be changed using setColor(Color c) in the Graphics class Colors can be taken from a list of constants in the Color 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) e.g. Color c = new Color(128,0,128) the values of red, green, blue must each be from 0-255

9/26/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L17: Canvas Slide 13 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 Font(String name, int style, int size)

9/26/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L17: Canvas Slide 14 Fonts The following styles are available Font.PLAIN Font.BOLD FONT.ITALIC these can be combined using the | operator Examples: Font f = new Font ("ArialBlack", Font.ITALIC | Font.BOLD, 36) Font f = new Font (“Times New Roman", Font.BOLD, 12)

9/26/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L17: Canvas Slide 15 Images (optional) Images are important for any applications to make it appealing to the eye e.g. for games or colorful GUIs In order to load images one needs to import the following packages 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 16 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 17 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); } ImageIO Example

9/26/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L17: Canvas Slide 18 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)