Download Chapter 5 - Madison College

Computer Science Notes
Chapter 5
Page 1 of 9
Chapter 5: Computer Graphics
Big Skills:
1. To be able to write simple graphical applications.
2. To display graphical shapes, such as lines, rectangles, and ellipses.
3. To use colors.
4. To display drawings consisting of many shapes.
5. To read input from a dialog box.
6. To develop test cases that validate the correctness of your programs.
Section 5.1: Frame Windows
All graphical applications show their information inside a frame window, which is a window with a title bar.
To construct a frame, follow these steps using these lines of codes:
1. Construct an object of the JFrame class:
JFrame frame = new JFrame();
2. Set the size of the frame:
frame.setSize(300,400);
3. Set the title of the frame:
frame.setTitle(“Test Picture”);
4. Set the “default close operation”:
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
5. Make the frame visible
frame.setVisible(true);
6. Import the package javax.swing:
import javax.swing.*;
Computer Science Notes
Chapter 5
Page 2 of 9
Section 5.2: Drawing Shapes
To draw a shape, you have to first construct a component object, and then add that component to the frame.
To construct a new component:
1. Define a class that extends the JComponent class:
public class RectangleComponentMirus extends JComponent
2. Create a paintComponent method (which overrides the JComponent method of the same name); this
method is called automatically when the window is shown fro the first time:
public void paintComponent(Graphics g);
3. Use a cast of the graphics parameter g to recover it as Graphics2D object:
Graphics2D g2 = (Graphics2D) g;
4. Place drawing instructions inside the paintComponent method:
g2.draw(box);
To see the component, add it to your frame:
1. Construct a frame as stated on page 1.
2. Construct an object of your component class:
RectangleComponentMirus component = new RectangleComponentMirus();
3. Add the component to the frame:
frame.add(component);
4. Make the frame visible.
Computer Science Notes
Chapter 5
Page 3 of 9
File RectangleComponentMirus.java
(defines a rectangle component to be drawn)
File RectangleViewTest.java
(for viewing the rectangle in the component
definition)
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import javax.swing.JComponent;
import javax.swing.JFrame;
/* Create a new graphics component that draws two
rectangles and has inherited properties from the JComponent
class
*/
public class RectangleComponentMirus extends JComponent
{
// overrides javax.swing.JComponent.paintComponent
public void paintComponent(Graphics g)
{
//Recover Graphics2D
Graphics2D g2 = (Graphics2D) g;
public class RectangleViewTest
{
public static void main(String[] args)
{
JFrame frame = new JFrame();
final int FRAME_WIDTH = 300;
final int FRAME_HEIGHT = 400;
frame.setSize(FRAME_WIDTH, FRAME_HEIGHT);
frame.setTitle("Test Picture");
frame.setDefaultCloseOperation(
JFrame.EXIT_ON_CLOSE);
RectangleComponentMirus component = new
RectangleComponentMirus();
frame.add(component);
frame.setVisible(true);
//Construct a rectangle and draw it
Rectangle box = new Rectangle(5, 10, 20, 30);
g2.draw(box);
}
}
//Move rectangle 15 units right and 25 units down
box.translate(15, 25);
//Draw moved rectangle
g2.draw(box);
}
}
Computer Science Notes
Chapter 5
Page 4 of 9
Advanced Topic 5.1: Applets
An applet is a program that runs inside a web browser.
To implement a graphical applet, use the same code as for implementing a component, but make the following
changes:
1. Instead of extending the JComponent class, extend the JApplet class:
public class RectangleAppletMirus extends JApplet
2. Instead of creating a paintComponent method, create a paint method instead:
public void paint(Graphics g);
To see the applet, compile it, then put the name of the object file in an applet tag in an HTML document:
1. Add the following code to the body of an HTML document:
<applet code = “RectangleAppletMirus.class” width=”300” height=”400”></applet>;
File RectangleAppletMirus.java
(defines a rectangle component to be drawn)
File Rectangle.html
(for viewing the rectangle in a web browser)
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import javax.swing.JApplet;
<html>
/* Create a new graphics applet that draws two rectangles
and has inherited properties from the JApplet class
*/
public class RectangleComponentMirus extends JApplet
{
// overrides javax.swing.JApplet.paint
public void paint(Graphics g)
{
//Recover Graphics2D
Graphics2D g2 = (Graphics2D) g;
//Construct a rectangle and draw it
Rectangle box = new Rectangle(5, 10, 20, 30);
g2.draw(box);
//Move rectangle 15 units right and 25 units down
box.translate(15, 25);
//Draw moved rectangle
g2.draw(box);
}
}
<head>
<title>Test Picture</title>
</head>
<body>
<p>Here is a test applet that draws rectangles.</p>
<applet code="RectangleAppletMirus.class" width="300"
height="400"></applet>
</body>
</html>
Computer Science Notes
Chapter 5
Section 5.3: Graphical Shapes
To draw an ellipse or circle:
1. import java.awt.geom.Ellipse2D;
2. Ellipse2D.Double ellipse = new Ellipse2D.Double(x_topleft, y_topleft, width, height);
3. g2.draw(ellipse);
4. Ellipse2D.Double circle = new Ellipse2D.Double(x_topleft, y_topleft, diameter, diameter);
5. g2.draw(circle);
To draw a line:
1. import java.awt.geom.Line2D;
2. Line2D.Double line1 = new Line2D.Double(x_start, y_start, x_end, y_end);
3. g2.draw(line1);
To define a point:
1. import java.awt.geom.Point2D;
2. Point2D.Double point1 = new Point2D.Double(x, y);
3. Points can not be drawn; they are used as alternate parameters to other shape objects:
line1.setLine(point1,point2);
To draw a polygon:
1. import java.awt.Polygon;
2. Polygon triangle = new Polygon();
3. Add points using the addPoint() method:
poly.addPoint(100,0);
poly.addPoint(200,100);
poly.addPoint(0,100);
g2.draw(triangle);
4.
To draw text in a frame:
1. g2.drawString(“Hello, World!”, x_lowerleft, y_lowerleft);
Page 5 of 9
Computer Science Notes
Chapter 5
Page 6 of 9
Section 5.4: Colors
To change colors right before you draw a shape:
1. import java.awt.Color;
2. g2.setColor(Color.PINK);
To define and use your own color object:
1. import java.awt.Color;
2. Color mycolor = new Color(0.1F, 0.2F, 0.3F);
3. g2.setColor(mycolor);
To draw a shape that is filled in with a given color:
1. g2.fill(poly);
Predefined Colors and Their RGB Values
RGB Value (a floating point number
from 0.0 to 1.0)
Color.BLACK
0.0F, 0.0F, 0.0F
Color.WHITE
1.0F, 1.0F, 1.0F
Color.RED
1.0F, 0.0F, 0.0F
Color.GREEN
0.0F, 1.0F, 0.0F
Color.BLUE
0.0F, 0.0F, 1.0F
Color.LIGHTGRAY
0.75F, 0.75F, 0.75F
Color.GRAY
0.5F, 0.5F, 0.5F
Color.DARKGRAY
0.25F, 0.25F, 0.25F
Color.YELLOW
1.0F, 1.0F, 0.0F
Color.MAGENTA
1.0F, 0.0F, 1.0F
Color.CYAN
0.0F, 1.0F, 1.0F
Color.PINK
1.0F, 0.7F, 0.7F
Color.ORANGE
1.0F, 0.8F, 0.0F
Color
Section 5.5: Drawing Complex Shapes
Graph it out, then write a new class (in a third source file) that defines all the drawing steps necessary for the
complex shape.
Section 5.6: Reading Text Input
To get user input through a dialog box instead of from the command line:
2. import javax.swing.JOptionPane;
3. String input = JOptionPane.showInputDialog(“Enter a value for x:”);
4. double x = Double.parseDouble(input);
Computer Science Notes
Chapter 5
File RectangleComponentMirus.java
(now modified to draw many shapes)
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Color;
import java.awt.Rectangle;
import java.awt.Polygon;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Point2D;
import java.awt.geom.Line2D;
import javax.swing.JComponent;
// Create a new graphics component that draws two rectangles
// and has inherited properties from the JComponent class
public class RectangleComponentMirus extends JComponent
{
// overrides javax.swing.JComponent.paintComponent
public void paintComponent(Graphics g)
{
//Recover Graphics2D
Graphics2D g2 = (Graphics2D) g;
//Construct a rectangle and draw it
Rectangle box = new Rectangle(5, 10, 20, 30);
g2.draw(box);
//Move rectangle 15 units right and 25 units down
box.translate(15, 25);
//Draw moved rectangle
g2.draw(box);
//change the color to pink
g2.setColor(Color.PINK);
//Construct an ellipse and draw it
Ellipse2D.Double ellipse = new Ellipse2D.Double(50,50,100,50);
g2.draw(ellipse);
//change the color to a custom RGB color
Color mycolor = new Color(0.1F, 0.2F, 0.3F);
g2.setColor(mycolor);
//Construct a circle and draw it
ellipse.setFrame(0, 300, 75, 75);
g2.draw(ellipse);
//construct two points
//note: you can't use the draw method with a point
Point2D.Double point1 = new Point2D.Double(300,10);
Point2D.Double point2 = new Point2D.Double();
//construct a line and draw it
g2.setColor(Color.BLACK);
Line2D.Double line1 = new Line2D.Double(0,100,200,300);
g2.draw(line1);
//change the line and draw it
line1.setLine(point1,point2);
g2.draw(line1);
Page 7 of 9
Computer Science Notes
Chapter 5
// draw a point by drawing a line with the same endpoints
point1.setLocation(150,270);
line1.setLine(point1,point1);
g2.draw(line1);
//Construct a six-sided polygon
Polygon poly = new Polygon();
poly.addPoint(110,110);
poly.addPoint(210,110);
poly.addPoint(260,160);
poly.addPoint(210,210);
poly.addPoint(110,210);
poly.addPoint(60,160);
//change the color to red and draw the filled-in polygon
g2.setColor(Color.RED);
g2.fill(poly);
//change the color to black and draw the outline of the polygon
g2.setColor(Color.BLACK);
g2.draw(poly);
//draw a label on the polygon
g2.drawString("This is a hexagon.", 100, 160);
}
}
Page 8 of 9
Computer Science Notes
Chapter 5
File RectangleViewTest.java
(now modified to use dialog boxes)
import javax.swing.JFrame;
import javax.swing.JOptionPane;
public class RectangleViewTest
{
public static void main(String[] args)
{
JFrame frame = new JFrame();
final int FRAME_WIDTH = 300;
final int FRAME_HEIGHT = 400;
frame.setSize(FRAME_WIDTH, FRAME_HEIGHT);
frame.setTitle("Test Picture");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
RectangleComponentMirus component = new RectangleComponentMirus();
frame.add(component);
frame.setVisible(true);
String input = "";
double x = 0;
input = JOptionPane.showInputDialog("Enter x:");
x = Double.parseDouble(input);
JOptionPane.showMessageDialog(null, "x = " + x);
}
}
Page 9 of 9