1 / 46

Java Graphics Programming: Applets & GUI Applications

Learn about console applications, GUI development, applets, HTML integration, shapes, colors, fonts, and text measurement in Java. Get hands-on examples with code snippets.

nayda-parks
Télécharger la présentation

Java Graphics Programming: Applets & GUI Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 4 Applets and Graphics

  2. Console and GUI applications • Console application • reads from keyboard • writes text to terminal window • easy to program • Graphical User Interface application • reads from keyboard, mouse • uses UI components (buttons, text fields, sliders) • can paint graphics

  3. Figure 1 A Console Application

  4. Figure 2 A Graphical Application

  5. Applets • Downloaded from web server • Run inside web browser (or applet viewer) • Bytecodes are platform-neutral (Windows, Mac, Linux, Solaris • Requires Java VM • Security issue: applet runs on local machine • By default, applet runs in “sandbox”

  6. Figure 3 Web Browsers Accessing a Web Server

  7. HTML • Text and markup, such as <H1> • Matching start and end tags: <I>...</I> • Bold <B> • List <UL>...</UL> List item <LI> • Images <IMG SRC="hamster.jpg"> • Links <A HREF="...">...</A> • Applets <APPLET CODE="..." WIDTH=... HEIGHT=...>

  8. Applet skeleton • public class MyApplet extends JApplet{ public void init() { // initializations go here . . . } public void paint(Graphics g) { Graphics2D g2 = (Graphics2D)g; // painting instructions go here . . . }}

  9. Figure 4 The Rectangle Applet in the Applet Viewer

  10. Figure 5 The Rectan- gle Applet in a Java 2–Enabled Browser

  11. Running applets • Write and compile applet (MyApplet.java) • Make HTML file MyApplet.html<APPLET CODE="MyApplet.class" WIDTH=300 HEIGHT=200> • Run applet viewerappletviewer MyApplet.html • Or load HTML file into Java 2 enabled browser

  12. Program RectangleApplet.java import java.applet.Applet; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Rectangle; public class RectangleApplet extends Applet { public void paint(Graphics g) { // recover Graphics2D Graphics2D g2 = (Graphics2D)g; // construct a rectangle and draw it Rectangle cerealBox = new Rectangle(5, 10, 20, 30); g2.draw(cerealBox);

  13. // move rectangle 15 units sideways and 25 units down cerealBox.translate(15, 25); // draw moved rectangle g2.draw(cerealBox); } }

  14. Graphical Shapes • Rectangle2D.Double • Ellipse2D.Double • Line2D.Double • Point2D.Double • Draw with draw method:Ellipse2D.Double egg = new Ellipse2D.Double(5,10,15,20);g2.draw(egg);

  15. Figure 6 An Ellipse and Its Bounding Box

  16. Colors • Use Color constructor:Color magenta = new Color(1.0F, 0.0F, 1.0F); • Predefined colors, e.g. Color.red • Set current color of graphics context:g2.setColor(magenta); • Draw or fill shapes in color:g2.draw(egg);g2.fill(egg);

  17. Fonts • Three font characteristics: • face name (e.g. "Times Roman", "Helvetica") • style (plain, bold, italic, bold + italic) • point size (12 point = normal screen font size) • Logical face names Serif, SansSerif, Monospaced • Font f = new Font("Serif", Font.BOLD, 36);

  18. Figure 8 Common Fonts

  19. Fonts 2 • Set current font of graphics context:g2.setFont(f); • Then draw string:g2.drawString("Hello", 50, 100);

  20. Measuring Text • Ascent = height above baseline • Descent = depth below baseline • Use text layout:FontRenderContext context = g2.getFontRenderContext();TextLayout layout = new TextLayout(message, font, context);float height = layout.getAscent() + layout.getDescent();float width = layout.getAdvance();

  21. Figure 7 Basepoint and Baseline

  22. Figure 9 Text Layout

  23. Figure 10 The Font Applet

  24. Program FontApplet.java import java.applet.Applet; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Font; import java.awt.font.FontRenderContext; import java.awt.font.TextLayout; public class FontApplet extends Applet { public void paint(Graphics g) { Graphics2D g2 = (Graphics2D)g; // select the font into the graphics context final int HUGE_SIZE = 48; Font hugeFont = new Font("Serif", Font.BOLD, HUGE_SIZE); g2.setFont(hugeFont); String message ="Applet";

  25. // create a text layout to measure the string FontRenderContext context = g2.getFontRenderContext(); TextLayout layout = new TextLayout(message, hugeFont, context); // measure the message width and height float xMessageWidth = layout.getAdvance(); float yMessageHeight = layout.getAscent() + layout.getDescent(); // center the message in the window float xLeft = 0.5F * (getWidth()- xMessageWidth); float yTop = 0.5F * (getHeight()- yMessageHeight); float yBase = yTop + layout.getAscent(); g2.drawString(message, xLeft, yBase); } }

  26. Figure 11 A Graphical Applet That Draws a Sketch of a Car

  27. Program CarDrawer.java import java.applet.Applet; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Rectangle; import java.awt.geom.Ellipse2D; import java.awt.geom.Line2D; import java.awt.geom.Point2D; public class CarDrawer extends Applet { public void paint(Graphics g) { Graphics2D g2 = (Graphics2D)g; Rectangle body = new Rectangle(100, 110, 60, 10); Ellipse2D.Double frontTire = new Ellipse2D.Double(110, 120, 10, 10); Ellipse2D.Double rearTire = new Ellipse2D.Double(140, 120, 10, 10);

  28. Point2D.Double r1 = new Point2D.Double(110, 110); // the bottom of the front windshield Point2D.Double r2 = new Point2D.Double(120, 100); // the front of the roof Point2D.Double r3 = new Point2D.Double(140, 100); // the rear of the roof Point2D.Double r4 = new Point2D.Double(150, 110); // the bottom of the rear windshield Line2D.Double frontWindshield = new Line2D.Double(r1, r2); Line2D.Double roofTop = new Line2D.Double(r2, r3); Line2D.Double rearWindshield = new Line2D.Double(r3, r4);

  29. g2.draw(body); g2.draw(frontTire); g2.draw(rearTire); g2.draw(frontWindshield); g2.draw(roofTop); g2.draw(rearWindshield); g2.drawString("JavaMobile 1.2ti", 100, 150); } }

  30. Figure 12 Using Graph Paper to Find Shape Coordinates

  31. Text Input • Use option pane:String input = JOptionPane.showInputDialog (promptString); • Convert strings to numeric input:int age = Integer.parseInt(input); • For now, place input commands in init method of applet

  32. Figure 16 An Input Dialog

  33. Program ColorSelect.java import java.applet.Applet; import java.awt.Color; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Rectangle; import javax.swing.JOptionPane; public class ColorSelect extends Applet { public void init() { String input; // ask the user for red, green, blue values input = JOptionPane.showInputDialog("red:"); float red = Float.parseFloat(input); input = JOptionPane.showInputDialog("green:"); float green = Float.parseFloat(input); input = JOptionPane.showInputDialog("blue:"); float blue = Float.parseFloat(input); fillColor = new Color(red,green,blue); }

  34. public void paint(Graphics g) { final int SQUARE_LENGTH = 100; Graphics2D g2 = (Graphics2D)g; // select color into graphics context g2.setColor(fillColor); // construct and fill a square whose center is // the center of the window Rectangle square = new Rectangle( (getWidth() - SQUARE_LENGTH) / 2, (getHeight() - SQUARE_LENGTH) / 2, SQUARE_LENGTH, SQUARE_LENGTH); g2.fill(square); } private color fillColor; }

  35. Visual and Numerical Data • Draw circle with radius r = 100 and center (a,b) = (100, 100). • Get user input for line position x • Intersection points(x - a)2 + (y - b)2 = r2y = b ± Ö(r2 - (x - a)2) • root = Math.sqrt(r*r - (x-a)*(x-a));y1 = b - root; y2 = b + root;

  36. Figure 17 Intersection of a Line and a Circle

  37. Program Intersect.java import java.applet.Applet; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.geom.Ellipse2D; import java.awt.geom.Line2D; import javax.swing.JOptionPane; public class Intersect extends Applet { public void init() { String input = JOptionPane.showInputDialog("x:"); x = Integer.parseInt(input); } public void paint(Graphics g) { Graphics2D g2 = (Graphics2D)g; double r = 100; // the radius of the circle // draw the circle

  38. Ellipse2D.Double circle = new Ellipse2D.Double(0, 0, 2 * r, 2 * r); g2.draw(circle); // draw the vertical line Line2D.Double line = new Line2D.Double(x, 0, x, 2 * r); g2.draw(line); // compute the intersection points double a = r; double b = r;

  39. double root = Math.sqrt(r * r - (x - a) * (x - a)); double y1 = b + root; double y2 = b - root; // draw the intersection points final double SMALL_CIRCLE_RADIUS = 2; Ellipse2D.Double circle1 = new Ellipse2D.Double( x - SMALL_CIRCLE_RADIUS, y1 - SMALL_CIRCLE_RADIUS, 2 * SMALL_CIRCLE_RADIUS, 2 * SMALL_CIRCLE_RADIUS); Ellipse2D.Double circle2 = new Ellipse2D.Double( x - SMALL_CIRCLE_RADIUS, y2 - SMALL_CIRCLE_RADIUS, 2 * SMALL_CIRCLE_RADIUS, 2 * SMALL_CIRCLE_RADIUS);

  40. g2.draw(circle1); g2.draw(circle2); // label the intersection points String label1 = "” + y1; String label2 = "” + y2; g2.drawString(label1, (float)x, (float)y1); g2.drawString(label2, (float)x, (float)y2); } private double x; }

  41. Unit Conversion • Pixel coordinates 0 . . . getWidth()-1, 0...getHeight()-1 • User coordinates xleft...xright, ytop...ybottom • Conversion formulaxpixel = (xuser - xleft)(width - 1) / (xright - xleft) • Note that usually ytop > ybottom • Use UnitConverter convenience class

  42. Figure 18 Plotting Temperature Data

  43. Program Phoenix.java import java.applet.Applet; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Rectangle; public class Phoenix extends Applet { public void paint(Graphics g) { Graphics2D g2 = (Graphics2D)g; month = 0; units = new UnitConverter(0, 12, 0, 40, getWidth(), getHeight()); final int JAN_TEMP = 11; final int FEB_TEMP = 13; final int MAR_TEMP = 16; final int APR_TEMP = 20; final int MAY_TEMP = 25; final int JUN_TEMP = 31; final int JUL_TEMP = 33; final int AUG_TEMP = 32; final int SEP_TEMP = 29;

  44. final int OCT_TEMP = 23; final int NOV_TEMP = 16; final int DEC_TEMP = 12; drawBar(g2, JAN_TEMP); drawBar(g2, FEB_TEMP); drawBar(g2, MAR_TEMP); drawBar(g2, APR_TEMP); drawBar(g2, MAY_TEMP); drawBar(g2, JUN_TEMP); drawBar(g2, JUL_TEMP); drawBar(g2, AUG_TEMP); drawBar(g2, SEP_TEMP); drawBar(g2, OCT_TEMP); drawBar(g2, NOV_TEMP); drawBar(g2, DEC_TEMP); }

  45. public void drawBar(Graphics2D g2, int temperature) { // construct rectangle for this month and temperature Rectangle rect = new Rectangle(month, 0, 1, temperature); // convert to pixel coordinates and draw units.convert(rect); g2.draw(rect); month++; } private int month; private UnitConverter units; }

  46. Figure 19 A Tic-Tac-Toe Board

More Related