Download Lecture 7: Java Software Solutions Foundations of Program Design

Lecture 7
Basic Graphics
Instructors:
Fu-Chiung Cheng
(鄭福炯)
Associate Professor
Computer Science & Engineering
Tatung Institute of Technology
1
Outline
•
•
•
•
•
the coordinate system for Java graphics
the use of color
drawing shapes such as lines, ovals, rectangles, etc.
the use of fonts
basic animation techniques
1
The Graphics Class
• An object of the Graphics class represents a
particular drawing surface
• It defines a graphics context in which drawn
shapes will be rendered
• The Graphics class contains methods for
drawing various shapes and controlling visual
aspects like font and color
• An applet has a graphics context, which is
automatically passed to the paint method when
it is called
2
The Coordinate System
• A simple two-dimensional coordinate system
exists for each graphics context (or drawing
surface)
• Each point on the coordinate system represents a
single pixel
• The top left corner of the area is coordinate <0, 0>
• A drawing surface has a particular width and
height
• Anything drawn outside of that area will not be
3
visible
The Coordinate System
<0, 0>
x
X
y
<x, y>
Y
<width-1, height-1>
4
import java.applet.Applet;
import java.awt.*;
public class Coordinates extends Applet {
public void paint (Graphics page) {
// setSize (300, 200); // an abstract method
// of Component class
resize(400,300);
// use resize
page.drawRect (0, 0, 299, 199);
page.drawLine (50, 50, 250, 100);
page.drawString ("<50, 50>", 25, 45);
page.drawString ("<250, 100>", 225, 115);
} // method paint
} // class Coordinates
Color
• The Color class is used to define and manage the
color in which shapes are drawn
• Colors are defined by their RGB value,
( red, green, blue) (8 bits/color).
• Each drawing surface has
– a foreground color (setColor) and
– a background color (setBackground)
• The setColor is a method of Graphic
setBackground is a methods of the Applet
5
class
Color
• The Color class contains several predefined
colors, defined as public, static constants
• See Nature.java(next page)
• Many other colors can be defined using the
constructor of the Color class
• Over 16 million colors can be defined, but humans
cannot distinguish between many similar colors
• Furthermore, the hardware of most systems has
limitations to the color options available
6
import java.applet.Applet;
import java.awt.*;
public class Nature extends Applet {
public void paint (Graphics page) {
setBackground (Color.white);
page.setColor (Color.red);
page.drawRect (10, 15, 125, 85);
page.setColor (Color.green);
page.drawString ("Nature's first green", 25, 45);
page.setColor (Color.yellow);
page.drawString ("is gold.", 50, 75);
} // method paint
} // class Nature
XOR Mode
• Drawing in normal mode causes shapes of the
same color to blend together
• Drawing in XOR mode causes the overlapping
portions of the shapes to be rendered in a
contrasting color
• This effect can be used to "erase" a shape by
redrawing it in the same color in the same spot
while in XOR mode
• See XOR_Demo.java (next page)
7
import java.awt.*;
import java.applet.*;
public class XOR_Demo extends Applet {
public void paint (Graphics page) {
page.fillRect (10,10,20,20); // disjoint
page.fillRect (40,10,20,20);
page.fillRect (100,10,20,20); // overlap
page.fillRect (110,20,20,20);
page.fillRect (140,10,20,20); // draw in the same position
page.fillRect (140,10,20,20);
page.setXORMode (Color.gray);
page.fillRect (10,110,20,20);
page.fillRect (40,110,20,20);
page.fillRect (100,110,20,20);
page.fillRect (110,120,20,20);
page.fillRect (140,110,20,20);
page.fillRect (140,110,20,20);
} // method paint
} // class XOR_Demo
Drawing Shapes
• The Graphics class contains methods for
drawing several specific shapes:
– lines, ovals, rectangles, arcs, polygons, and
polylines
• Most shapes can be drawn filled or unfilled
• A line, drawn with the drawLine method, is
always one pixel wide and cannot be filled
8
Ovals
• An oval is defined by its bounding rectangle:
width
height
• The methods that draw an oval take four
parameters, all integers:
drawOval(x, y, width, height)
fillOval(x, y, width, height)
9
Ovals
• The first two parameters are the <x, y> coordinate
of the top-left corner of the bounding rectangle
• The third and fourth parameters specify the width
and height of the bounding rectangle
• The drawOval method draws an unfilled oval
and the fillOval method draws a filled (opaque)
oval
• See Ovals.java and
Rotating_Disk.java
10
import java.applet.Applet;
import java.awt.*;
public class Ovals extends Applet {
public void paint (Graphics page) {
page.drawOval (20, 20, 30, 50);
page.drawOval (70, 40, 60, 10);
page.drawOval (150, 30, 30, 30); // a circle
page.fillOval (30, 100, 50, 30);
page.drawRect (100, 100, 50, 30); // bounding rectangle
page.fillOval (100, 100, 50, 30);
} // method paint
} // class Ovals
...
<APPLET CODE="Ovals.class" WIDTH=300 HEIGHT=150>
</APPLET>
...
Rectangles
• Rectangles can be drawn
– filled or unfilled
– with squared or rounded corners
– with a slight three-dimensional effect or not
• The primary parameters for all rectangle drawing
methods define the upper left corner of the
rectangle and its width and height
• The shape of the rounded corner of a rounded
rectangle are defined by an arc width and height
11
Rectangles
• A three dimensional rectangle is shown using a
small highlight on two sides of the rectangle
• The highlight appears on the bottom and right or
the top and left as specified by a boolean
parameter to the 3D drawing methods
• See Rectangles.java (Next two pages)
12
import java.applet.Applet;
import java.awt.*;
public class Rectangles extends Applet {
public void paint (Graphics page) {
setBackground (Color.white);
setForeground (Color.gray);
// Rectangles:
page.drawRect (20, 20, 30, 50);
page.drawRect (70, 40, 60, 10);
page.drawRect (150, 30, 30, 30); // a square
page.fillRect (200, 20, 50, 30);
page.fillRect (270, 20, 20, 40);
// Rounded Rectangles:
page.drawRoundRect (20, 120, 50, 50, 25, 25);
page.drawOval (20, 120, 25, 25); // oval
page.drawRoundRect (90, 130, 40, 30, 40, 15);
page.fillRoundRect (150, 120, 40, 40, 10, 30);
page.fillRoundRect (210, 130, 50, 20, 15, 15);
// 3D Rectangles:
page.draw3DRect (20, 220, 50, 50, true);
page.fill3DRect (90, 220, 50, 50, true);
page.draw3DRect (160, 220, 50, 50, false);
page.fill3DRect (230, 220, 50, 50, false);
} // method paint
} // class Rectangles
Arcs
• An arc is defined as a segment of an oval
• The first four parameters to the arc drawing
methods define the bounding rectangle of the oval
(top left corner, width, and height)
• The other two parameters define the start angle
and the arc angle
• The start angle indicates where the arc begins and
the arc angle determines how far the arc sweeps
across its defining oval
13
• See Arcs.java(next page)
import java.applet.Applet;
import java.awt.*;
public class Arcs extends Applet {
public void paint (Graphics page) {
page.drawArc (10, 10, 50, 50, 45, 225);
page.drawArc (70, 10, 30, 70, -180, 180);
page.fillArc (130, 10, 60, 60, -180, -90);
page.fillArc (190, 10, 50, 50, 45, 270);
page.fillArc (250, 10, 80, 40, -225, 180);
} // method paint
} // class Arcs
Arcs
• The start angle can be specified using both
positive and negative values:
90
-270
45
-315
0
360
-360
180
-180
270
-90
14
Arcs
• An arc angle can also be positive or negative
• A positive arc angle sweeps counterclockwise, and
a negative arc angle sweeps clockwise
• Therefore, the same arc can be specified using
four different combinations of start and arc angles
• Arcs can also be filled or unfilled
15
Polygons
• A polygon is a multisided figure defined by a series of
ordered points
• Line segments connecting the points form the polygon
• The points are defined by corresponding arrays of x
and y coordinate values, and can already be
incorporated into an object of the Polygon class
• Polygons are closed, forming a line segment from the
last point back to the first
• See Polygons.java
16
import java.applet.Applet;
import java.awt.*;
public class Polygons extends Applet {
private int[] xset1 = {110, 110, 115, 120, 150, 135};
private int[] yset1 = {10, 40, 30, 50, 15, 7};
private int[] xset2 = {195, 170, 170, 195, 220, 220};
private int[] yset2 = {10, 20, 40, 50, 40, 20};
private int[] xset3 = {110, 150, 110, 150, 110};
private int[] yset3 = {70, 70, 110, 110, 70};
private Polygon poly = new Polygon();
public void paint (Graphics page) {
page.drawPolygon (xset1, yset1, 6);
page.drawPolygon (xset2, yset2, 6);
page.fillPolygon (xset3, yset3, 5);
poly.addPoint (170, 70);
poly.addPoint (170, 90);
poly.addPoint (190, 110); poly.addPoint (220, 90);
page.fillPolygon (poly); // closed automatically
} // method paint
} // class Polygons
Polylines
• A polyline is similar to a polygon except that it is
not closed
• That is, there is no line segment from the last point
back to the first unless explicitly specified
• They are convenient for specifying certain kinds
of complex shapes
• Polylines cannot be filled
• See Polylines.java
17
import java.applet.Applet;
import java.awt.*;
public class Polylines extends Applet {
private int[] xset1 = {110, 110, 115, 120, 150, 135};
private int[] yset1 = {10, 40, 30, 50, 15, 7};
private int[] xset2 = {195, 170, 170, 195, 220, 220};
private int[] yset2 = {10, 20, 40, 50, 40, 20};
public void paint (Graphics page) {
page.drawPolyline (xset1, yset1, 6);
page.drawPolyline (xset2, yset2, 6);
} // method paint
} // class Polylines
Fonts
• Each computer system supports a specific set of
fonts
• A font defines the look of each character when it is
printed or drawn
• The Font class provides methods for specifying
fonts in a Java program
• The setFont method defines the current font for
a program
18
Fonts
• A font is defined using the Font class constructor
and a combination of:
– font name
– font style: plain, bold, italic, or bold+italic
– font size, in points
• Constants are defined in the Font class to specify
the font style
• See Entropy.java
19
import java.applet.Applet;
import java.awt.*;
public class Entropy extends Applet {
private String quote = "Entropy isn't what it used to be.";
public void paint (Graphics page) {
page.setFont (new Font ("TimesRoman", Font.PLAIN, 12));
page.drawString (quote, 10,20);
page.setFont (new Font ("TimesRoman", Font.BOLD, 14));
page.drawString (quote, 10,40);
page.setFont (new Font ("Helvetica", Font.ITALIC, 16));
page.drawString (quote, 10,60);
page.setFont (new Font ("Helvetica", Font.PLAIN, 18));
page.drawString (quote, 10,80);
} // method paint
} // class Entropy
Animations
• Simple animations: drawing a shape, erasing it,
then drawing it again in a slightly altered position
• Erasing can be accomplished through careful use
of XOR mode
• Timing must be controlled so that the animation
does not move too fast
• See BouncingBall.java (appletviewer
will be too fast) use Netscape or
IE.
20
public class BouncingBall extends Applet {
private final int PAUSE = 100000;
private final int SIZE = 300;
private Ball ball = new Ball(150, 10, 250, 200);
private Graphics page; public void init() {
setVisible(true);
//setSize (SIZE, SIZE);
page = getGraphics();
page.setXORMode (getBackground());
} // method init
public void start() {
for (int pause = 1; pause < PAUSE; pause++);
while (ball.moving())
ball.bounce (page);
ball.drawBall(page);
} // method start
} // class BouncingBall
class Ball {
private final int MOVE = 1;
private final float DISTANCE = 0.97f;
private final int SIZE = 20;
private final int PAUSE = 1000000;
private int x; private int startY; private int endY;
private int length; private boolean movingUp = true;
Ball (int newX,int newStartY,int newEndY,int newLength) {
x = newX;
startY = newStartY;
endY = newEndY;
length = newLength;
} // constructor Ball
void move() {
if (movingUp)
endY = endY - MOVE;
else
endY = endY + MOVE;
} // method move
void drawBall (Graphics page) {
page.fillOval (x-(SIZE/2), endY, SIZE, SIZE);
page.drawLine (x, startY, x, endY);
} // drawBall
public boolean moving () {
return length !=0;
} // method moving
public void bounce (Graphics page) {
for (int count = 1; count < length; count += MOVE) {
drawBall(page);
for (int pause = 1; pause < PAUSE/length; pause++);
drawBall(page);
move();
}
movingUp = !movingUp;
length = (int) (DISTANCE * length);
} // method bounce
} // class Ball
Conclusion
• Graphic class represents a particular drawing surface
and contains methods for drawing shapes on it.
Shapes: ovals, rectangles, lines, polygons, polylines
string
• Any portion drawn outside of the drawing surface
will not be displayed.
• Color class defines several common colors.