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