1. Barb Ericson Georgia Institute of Technology September 2005
Drawing in Java – part 1
Barb Ericson
Georgia Institute of Technology
September 2005
Georgia Institute of Technology

2. Georgia Institute of Technology
Learning Goals
Understand at a conceptual and practical level
How to change pixel colors to draw lines
How to use the java.awt.Graphics class to do simple drawing
How to draw simple shapes
How to set the color
How to set the font
How to draw strings
Georgia Institute of Technology

3. Georgia Institute of Technology
Drawing on a Picture
What if we want to draw something on a picture?
How about drawing a grid of lines on top of the picture
We could just set the pixels to black to make up the lines
We could add vertical lines every 20 pixels
Start x = 20, x < width, x += 20
Start y= 0, y < height, y++
We could add horizontal lines every 20 pixels
Start y = 20, y < height, y+=20
Start x=0, x < width, x++
Georgia Institute of Technology

4. Drawing Lines Exercise
Write a method drawGrid to draw horizontal and vertical lines on the current picture
Lines every 20 pixels in x and y
To test it:
String file = FileChooser.getMediaPath(“barbara.jpg”);
Picture p = new Picture(file);
p.drawGrid();
p.show();
Georgia Institute of Technology

5. Georgia Institute of Technology
Drawing Other Shapes
How would you draw a circle on a picture?
How would you draw a string of characters?
You still would need to set the pixel colors of certain pixels
Which pixels?
Java has a way of doing these things
Using a Graphics object
It knows how to draw and fill simple shapes and images
You can draw on a picture object
By getting the graphics object from it
pictureObj.getGraphics();
Georgia Institute of Technology

6. Georgia Institute of Technology
AWT Graphics Class
Methods of the Graphics class in the java.awt package let you paint
Pick a color to use
Draw some shapes
Circles, Rectangles, Lines, Polygons, Arcs
Shapes drawn on top of other shapes will cover them
Set the font to use
Draw some letters (strings)
Georgia Institute of Technology

7. Georgia Institute of Technology
Working with Color
To create a new color object
new Color(redValue,greenValue,blueValue)
There are predefined colors
red, green, blue, black, yellow, gray, magenta, cyan, pink, orange
To use these do: Color.red or Color.RED
Remember to import java.awt.*; or java.awt.Color;
Set the current drawing color using
graphicsObj.setColor(colorObj);
Get the current drawing color using
Color currColor = graphicsObj.getColor();
Georgia Institute of Technology

8. Graphics Environment 0,0 +X 0, 0 is at the top left
Graphics are often positioned by their top left corner
Coordinate units are measured in pixels
0,0 +X
0, 0 is at the top left
X increases to the right
Y increases going down the page
The number of pixels that can be displayed is the resolution of the display. Common resolutions are 1024 by 768, and 1280 by 1024. +Y
400,200
Georgia Institute of Technology

9. Drawing Circles and Ellipses
gObj.drawOval(x,y,width, height)
gObj.fillOval(x,y,width,
height)
Give the x and y of the upper left corner of the enclosing rectangle
Not a point on the circle or ellipse
Give the width and height of the enclosing rectangle
To make a circle use the same value for the width and height
x,y
height
width
Georgia Institute of Technology

10. Georgia Institute of Technology
Draw Circle Exercise
Write a method to add a yellow sun to a picture
Test with beach.jpg
String file = FileChooser.getMediaPath(“beach.jpg”);
Picture p = new Picture(file);
p.drawSun();
p.show();
Save the new image with pictureObj.write(fileName);
For a more reusable method add parameters for the top left x, top left y, and width of the sun.
Georgia Institute of Technology

11. Georgia Institute of Technology
Working with Fonts
Create a font object with the font name, style, and point size
Font labelFont = new Font(“TimesRoman”, Font.BOLD, 24);
Font normalFont = new Font(“Helvetica”,Font.PLAIN, 12);
Set the current font
gObj.setFont(labelFont);
Get font information
gObj.getStyle(), g.getSize(), g.getName(), g.getFamily
These font names are guaranteed to exist:
TimesRoman
Courier
Helvetica
Dialog
DialogInput
int currStyle = g.getStyle(); // get the current font style as int
int currSize = g.getSize(); // get the current font size as int
String currName = g.getName(); // get font name as a string
String currFamily = g.getFamily(); // get font’s family name as a string
Georgia Institute of Technology

12. Georgia Institute of Technology
Working with Strings
To draw a string
gObj.drawString(“test”,leftX,baselineY);
Use FontMetrics class for drawing information
FontMetrics currFontMetrics = g.getFontMetrics();
int baselineY = currFontMetrics.getHeight() currFontMetrics.getDescent();
int width = currFontMetrics.stringWidth(“test”);
ascent
leftX
leading
test string
height
baselineY
descent
Georgia Institute of Technology

13. Add a String to a Picture Exercise
Write a method drawString that will add some text to a picture
Set the color to draw with
Set the font to use when drawing the string
Draw a string near the bottom left of the picture
If you have time create another method that takes a string and y value and centers the string in x
Test with
String file = FileChooser.getMediaPath(“kitten2.jpg”);
Picture p = new Picture(file);
p.drawString(“Barbara Ericson”);
p.show();
Photographers often do this for copyright. To make this method more reusable add the color, font, and y position as parameters to this method.
Georgia Institute of Technology

14. Drawing Lines and Polygons
g.drawLine(x1,y1,x2,y2);
Polygon
Outlined Polygon
gObj.drawPolygon(xArray,yArray,numPoints);
gObj.drawPolygon(currPolygon);
Filled Polygon
gObj.fillPolygon(xArray, yArray, numPoints);
gObj.fillPolygon(currPolygon);
x1,y1
x2,y2
Create a polygon with:
Polygon currPolygon = new Polygon();
currPolygon.addPoint(x,y); or
Polygon currPolygon = new Polygon(xArray, yArray, numPoints);
For a closed polygon make sure the first and last points are the same.
Georgia Institute of Technology

15. Drawing Lines Exercise
Write a method (drawX) for adding two crossed lines to a picture
Using a passed color
Start one line at the top left corner of the picture
End it at the bottom right corner of the picture
Start the other line at the bottom left of the picture
End it at the top right
You can test it with barbara.jpg
Georgia Institute of Technology

16. Georgia Institute of Technology
Summary
You can draw by changing the color of the pixels
Or you can use java.awt.Graphics to do drawing
Get the Graphics object from a Picture object
Graphics graphics = pictureObj.getGraphics();
Set the color
graphics.setColor(Color.RED);
Do some simple drawing
graphics.drawLine(x1,y1,x2,y2);
graphics.drawOval(x1,y1,width,height);
graphics.drawString(“string to draw”,leftX,baseline);
Georgia Institute of Technology