Download Drawing on a Picture

Drawing in Java – part 1
Dr Usman Saeed
Assistant Professor
Faculty of Computing and Information
Technology
North Jeddah Branch
King Abdulaziz University
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
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
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
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
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
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
Graphics Environment
• 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
+Y
400,200
Georgia Institute of Technology
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
x,y
height
– 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
Georgia Institute of Technology
width
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);
Georgia Institute of Technology
Draw Circle Exercise
public void addSun()
{
// get the graphics context from the picture
Graphics g = this.getGraphics();
// set the color to yellow
g.setColor(Color.yellow);
// draw the sun
g.fillOval(100,10,50,50);
}
Georgia Institute of Technology
Other Primitives
•
•
•
•
•
•
•
setColor(Color color)
drawLine(int x1, int y1, int x2, int y2)
drawRect(int x1, int y1, int w, int h)
fillRect(int x1, int y1, int w, int h)
drawOval(int x1, int y1, int w, int h)
fillOval(int x1, int y1, int w, int h)
drawArc(int x1, int y1, int w, int h, int startAngle, int
arcAngle)
• fillArc(int x1, int y1, int w, int h, int startAngle, int
arcAngle)
• drawPolygon(int[] xArray, int[] yArray, int numPoints)
• fillPolygon(int[] xArray, int[] yArray, int numPoints)
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
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”);
leftX
ascent
test string
baselineY
leading
height
descent
Georgia Institute of Technology
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”,10,400);
p.show();
Georgia Institute of Technology
Add a String to a Picture Exercise
public void drawString(String text, int x, int y)
{
// get the graphics object
Graphics g = this.getGraphics();
// set the color
g.setColor(Color.black);
// set the font
g.setFont(new Font("Arial",Font.BOLD,24));
// draw the string
g.drawString(text,x,y);
Georgia Institute of Technology
}
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
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