Upload
kari-ney
View
220
Download
1
Tags:
Embed Size (px)
Citation preview
Java Graphics
Section 1 - Multi-File Graphics Programs
Section 2 - The Coordinate System and Graphics Context g
Section 3 - The Java Drawing and Painting Commands
Go
Go
Go
Java Graphics
Section 1
Structure of an Applet Program
3
Structure of a Simple Applet Program
Simple painting and drawing applet programs only need one file. This
file doesn’t have a main() method like a console program, but has
two important methods:
1 – an init() method that can do various kinds of work to set up the
applet, like establish the size of the window the applet will be
viewed in or initialize important program variables to values.
2 – a paint() method that contains the code for drawing and painting
various components that will appear inside the applet window.
The GeometryApplet Driver Fileimport javax.swing.*;
import java.awt.*;
public class GeometryApplet extends JApplet
{
public void init ()
{
resize(800, 600);
}
public void paint (Graphics g)
{
super.paint(g);
// ALL OTHER DRAWING AND PAINTING CODE HERE
}
}
4
must have to erase and prepare background of applet window
note the parameter g that is the graphics context
Java Graphics
Section 2
Java’s Coordinate System
and
The Graphics Context g
The Java Graphics Coordinate System
• Every Java graphics program uses a coordinate system
similar to the one used in geometry. Positions of items in a
Java graphics window are specified in terms of two-
dimensional points (x, y).
• The main difference is that the origin (0, 0) for a Java graphics
window is located at the upper-left corner of a panel or frame.
• Because you can have several panels in a Java window, each
panel has its own coordinate system with its origin in the
upper-left corner.6
The Java Graphics Origin
Java’s origin
x values (horizontal) increase going to the right and y axes (vertical) increase downward (top to bottom).
7
Java’s PaintBrush: the Graphics Context g
Java has a Graphics class that allows programmers to draw or paint
on a panel using a pencil or brush object named g.
Every panel that is created maintains this object named g that is
formally called the graphics context. You can think of g as a pencil
for drawing and at the same time a paint brush for painting. So g
has the ability to draw or paint!
Shapes drawn on a panel by the Graphics class have a foreground
color for g. That way the background color can stay the same while
you draw or paint with another color. You can change the
foreground color by using g to call the setColor() method as in …
g.setColor(Color.yellow);
Every time we want to draw or paint, we will use g to call a method. 8
Java Graphics
Section 3
Java’s Drawing and Painting
Commands
The drawLine CommandTo draw a line in Java, you use g with the method named
drawLine.
The general form of the drawLine command is:
g.drawLine(x1, y1, x2, y2);
where you are drawing between two points, namely (x1, y1) and
(x2, y2).
So the line of code:
g.drawLine(0, 0, 25, 75);
draws a line between the two points (0, 0) and (25, 75).
10
The drawRect & fillRect Commands
To draw the outline of a rectangle, follow the general form of the
drawRect command:
g.drawRect(x, y, width, height);
To do this you must know the point (x, y) which represent the upper-
left corner of the rectangle and you must know the width and height
of the rectangle. This will draw the rectangle so that its sides are
oriented in either vertical or horizontal directions. You can never
draw a rectangle at an angle.
(x, y) width
height
11
The drawRect & fillRect CommandsTo draw the outline of a rectangle with upper left corner represented
by the point (50, 200) that has a width of 300 and a height of 150
use:
g.drawRect(50, 200, 300, 150);
To paint a rectangle with upper left corner represented by the point
(50, 200) that has a width of 300 and a height of 150 use:
g.fillRect(50, 200, 300, 150);
To draw an outline of a figure, the method name will always start with
the word “draw”. To paint a figure, the method name will always
begin with the word “fill”.12
drawRoundRect & fillRoundRect To draw the outline of a rounded-rectangle, follow the general form
of the drawRoundRect command:
g.drawRoundRect(x, y, width, height, arcWidth, arcHeight);
Draws the outline of a rounded rectangle whose upper-left corner is
(x, y) and whose dimensions are the specified width and height.
The corners are rounded according to the last two parameters.
To make them perfectly symmetrical, make the last two values
equal.(x, y)
width
height arcWidth
arcHeight
13
drawRoundRect & fillRoundRect
To draw the outline of a rounded-rectangle with the upper-left
corner represented by the point (300, 400) with a width of 100
and a height of 50 that has an arcWidth of 10 and an
arcHeight of 10 use:
g.drawRoundRect(300, 400, 100, 50, 10, 10);
To paint the same rounded-rectangle use:
g.fillRoundRect(300, 400, 100, 50, 10, 10);
14
The drawOval & fillOval CommandsTo draw the outline of an oval, follow the general form of the
drawOval command:
g.drawOval(x, y, width, height);
height
The height and width values determine the curvature characteristics of the oval
15
(x, y)
width
Draws the outline of an oval whose upper-left corner is (x, y)
and whose dimensions are the specified width and height of
an imaginary rectangle that circumscribes the oval.
The drawOval & fillOval CommandsTo draw the outline of an oval with upper left corner represented
by the point (50, 200) where the oval is circumscribed by a
rectangle with a width of 300 and a height of 150 use:
g.drawOval(50, 200, 300, 150);
To paint the same oval use
g.fillOval(50, 200, 300, 150);
150
The height and width values determine the curvature characteristics of the oval
16
(50, 200)
300
The drawArc & fillArc CommandsTo draw or paint an arc, use one of the following:
g.drawArc(x, y, width, height, startAngle, arcAngle); or
g.fillArc(x, y, width, height, startAngle, arcAngle);
This command draws the outline of an arc that is a portion of an
oval. It fits within a rectangle whose upper-left corner is (x, y)
and whose dimensions specify the width and height of an oval
that the arc is part of. The arc is drawn from startAngle to
startAngle + arcAngle. The angles are expressed in degrees.
A startAngle of 0 indicates the 3 o'clock position. The
arcAngle indicates how much and what direction is swept to
draw the arc. It can be positive or negative. A positive arc
indicates a counterclockwise rotation, and a negative arc
indicates a clockwise rotation from 3 o'clock. 17
The drawArc & fillArc CommandsExample: draw or paint the arc whose upper-left corner of its imaginary
oval is the point (100, 100) where the oval has a width of 50 and a
height of 50 and whose startAngle is 90 and whose arcAngle is 270.
Code: g.drawArc(100, 100, 50, 50, 90, 270);
start angle of 90
0 degrees = 3 o’clockheight of 50
width of 50
(100, 100)
270° draw or paint
imaginary rectangle that surrounds imaginary oval that the arc is part of.
18
drawPolygon & fillPolygon
To draw or paint a polygon, use one of the following:
g.drawPolygon(xvalues, yvalues, n); or
g.fillPolygon(xvalues, yvalues, n);
This code draws or paints a polygon where the abscissas (Xs)
and ordinates (Ys) of a set of points have been defined in two
simple arrays prior to making a call to either of the methods.
The parameter n represents the number of sides of the
polygon. We usually just place the correct number in place of
n. For example, if we are making a triangle with 3 sets of
points, then we put 3 in place of n. 19
drawPolygon & fillPolygonExample: draw or paint the triangle that has the three points:
(x1, y1) = (100, 25) (x2, y2) = (150, 75) (x3, y3) = (200, 50)
Here is the code you would need:
int [ ] xvalues = {100, 150, 200};
Note how the x values are placed: int [ ] xvalues = {x1, x2, x3};
int [ ] yvalues = {25, 75, 50};
Note how the y values are placed: int [ ] yvalues = {y1, y2, y3};
then you can use:
g.drawPolygon(xvalues, yvalues, 3);
g.fillPolygon(xvalues, yvalues, 3);
or 20
The drawString CommandTo draw a String to a panel use the general formula:
g.drawString(str, x, y);
where str is a String variable or a literal String value in double
quotes, and the point (x, y) indicates the position of where
the base line starts for what is to be printed.
Example: draw the words "Java Rules" at the point (10, 50).
g.drawString("Java Rules", 10, 50); or
String str= “Java Rules”; g.drawString(str, 10, 50);
Java Rules
(10, 50)
baseline
start of baseline
21
Changing Fonts for drawString()
• When you run a JFrame or JApplet program, Eclipse or other
IDEs will always use your default system font when you call
drawString().
• To change the drawing font, you need to define a font then
set the drawing font to that font. The code is on the next
slide:
22
Changing Fonts for drawString()Here are the steps to change the drawing font:
Step 1. Define a font.
Step 2. Set the font.
Step 3. Draw the string.
Example:
Step 1. Font font1 = new Font ("Arial", Font.BOLD, 18);
Step 2. g.setFont(font1);
Step 3. g.drawString("Java Rules", 100, 100);
The general form of the Font constructor line is:
Font font = new Font (<Font Name>, <Font Style>, <Font Size>);
The Font Name must be in double quotes.
The Font Style is usually a constant from the Font class. It can be:
PLAIN, BOLD, ITALIC, or BOLD + ITALIC. 23
The getWidth() and getHeight() Methods
The width and height of a panel can be found using the
getWidth() and getHeight() methods, respectively.
They return int values that give the number of pixels wide or the
number of pixels high of the panel.
This can be helpful for things like centering something in the
center of a panel no matter what its size is.
When calling these methods, do not use g.getWidth() or
g.getHeight()! One good way to use them is as parameters
when using the drawString method:
g.drawString(“Go Bearcats”, getWidth() / 2, getHeight() / 2); 24
Drawing and Painting Web Page
The drawing and painting commands web page discusses these
precedding commands and also tells you how to change the font
if you don’t like the default font when using drawString.
http://ww2.kcd.org/FundOfProg/special/JavaGraphicsCommands.html
25
The JPanel paintComponent() MethodWhen we create a class like ColorPanel that extends JPanel, we will
always have a paintComponent() method, and the first line of
code in it must always be ….
super.paintComponent (g);
This line of code produces a fresh blank panel for the ColorPanel
class to use and prepares it for drawing or painting. Your code will
follow that line of code.
Your method paintComponent() in ColorPanel will automatically be
called by the JVM when the panel needs to be drawn.
If someone is viewing your panel and decides to resize the window,
then the JVM will automatically call your paintComponent() method
which will then call super.paintComponent(g); (which erases the
panel) then your drawing code will be executed and the panel will
be redisplayed. 26
Over-Riding the paintComponent() Method
Occasionally, you will be over-riding methods! You are doing it for the
first time in the ColorPanel class!
If you could go look at the code of the JPanel class, you would find a
method with the method signature of ….. public void
paintComponent (Graphics g)
But you have a method with that exact method signature in your
ColorPanel class and the class definition of your ColorPanel class is
….
public class ColorPanel extends JPanel
By including “extends JPanel” in your class definition line and the
method paintComponent with that exact method signature, then you
are “over-riding” the paintComponent method. (See next slide) 27
Over-Riding the paintComponent() Method
By over-riding the method paintComponent, you are telling
Java to NOT execute the paintComponent method of the
JPanel class but instead to execute your paintComponent
method that has your drawing code.
However, to make sure the panel is repainted properly with the
background color when resized we need to call
super.paintComponent and it has to be the first line of code
in your paintComponent method.28