第四章

小程式和圖學(Graphics)

Console Application

Graphical Application

4.1 小程式(Applets)

具有圖形介面的Java程式
可利用 appletviewer 或網頁瀏覽器(browser)執行
跨平台
容易佈建--需要時下載即可
安全

網路伺服器(Web Server)與網頁瀏覽器(Browser)

網頁瀏覽器(Browser)

4.2 HTML簡介

HTML (HyperText Markup Language, 超文字標示語言)文件, 經由 HTTP ( HyperText Transfer Protocol) 網路通訊協定，便能夠在世界各地透過 WWW (World Wide Web) 流通。

文字標籤

文字(text) 和標籤(tag):
標示 (Markup) 是透過在文章中插入標籤 (由 < 與 > 所括住的文字) 來賦予文字一些特性，如標題，段落，連結等等。
例如
```
Java is an <i>object-oriented</i> programming language
```
網頁瀏覽器將標籤所標示的特性表現出來:
```
Java is an object-oriented programming language
```
在 HTML 文件中，我們可用下列三種方法來列表：
- 無序列表（Unordered list）是用 <ul> 標籤來達成，例如
  ul.htm
- 有序列表（Ordered list）是用 <ol> 標籤來達成，例如
  ol.htm
- 定義列表（Definition list）是用 <dl> 標籤來達成，例如
  dl.htm

影像, 連結和小程式標籤

影像標籤用以在網頁中插入影像或圖片, 可有屬性: source, size, alternate text

<img src="hamster.jpeg" width="640" height="480"
alt="A photo of Harry, the horrible hamster" />

連結標籤用以標示另一網頁的連結, 如
```
<a href="http://java.sun.com">Java</a> is an . . .
```
小程式標籤用以標示程式碼(class)和在網頁中所需的空間, 如
```
<applet code="HamsterApplet.class" width="640" height="480"> 
```

參考資料:

4.3 簡單小程式

Viewing an Applet

設計一個或更多的 Java 原始程式, 以實現小程式。
其中一個程式必須界定 applet 類別(例如 RectangleApplet.java)。
將這些原始程式檔編譯成 class 檔(例如 RectangleApplet.class)
編輯一份 HTML 檔(例如 RectangleApplet.html), 其中用 applet 標籤指到此 applet class, 例如
```
<applet code="RectangleApplet.class"></applet>
```
執行 appletviewer RectangleApplet.html
或將此 HTML 檔裝入 Java 2 相容的瀏覽器。

用Applet Viewer 執行 RectangleApplet

用瀏覽器執行 RectangleApplet

小程式類別 Outline

class MyApplet extends Applet
{
   public void paint(Graphics g)
   {
      Graphics2D g2 = (Graphics2D)g;
      // add drawing operations
      . . .
   }
}

File RectangleApplet.java

import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;

/**
   An applet that draws two rectangles.
*/
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);

      // move rectangle 15 units sideways and 25 units down

      cerealBox.translate(15, 25);

      // draw moved rectangle

      g2.draw(cerealBox);
   }
}

示範:

4.4 圖形形狀

形狀類別有 Ellipse2D.Double, Line2D.Double, 等等
不用 .Float 類別

這些類別必須用 import 敘述引入:

import java.awt.geom.Ellipse2D;   // no .Double

必須先建構, 然後畫出 圖形
Ellipse2D.Double easterEgg = new Ellipse2D.Double(5, 10, 15, 20); g2.draw(easterEgg)

橢圓

線和點Lines and Points

Line2D.Double segment = new Line2D.Double(x1, x2, y1, y2);

更具物件導向的方式是端點使用 Point2D.Double :

Point2D.Double from = new Point2D.Double(x1, y1);
Point2D.Double to = new Point2D.Double(x2, y2);
Line2D.Double segment = new Line2D.Double(from, to);

畫粗線 Draw thick lines:

g2.setStroke(new BasicStroke(4.0F)); // 4 pixels

4.5 顏色

顏色中紅,綠,藍的成分用 0.0F 到 1.0F之間的數值規定
Color magenta = new Color(1.0F, 0.0F, 1.0F)
標準顏色
Color.black Color.yellow Color.pink . . .
在圖形內含(graphics context)設定顏色:
g2.setColor(Color.pink);
然後畫出形狀
g2.fill(easterEgg);

4.6 字集

Specify text and base point:
```
g2.drawString("Applet", 50, 100);
```
字集物件的屬性有
- 字体名稱face name (Serif, SansSerif, Monospaced, ...)
- 字体(style) (Font.PLAIN, Font.BOLD, Font.ITALIC )
- 大小(point size, 12 point = normal size)

字集的設定

g2.setFont(new Font("Serif", Font.BOLD, 36));

常用字集

標楷體

細明體

隸書體

基點(Basepoint) 和基線(Baseline)

4.7 畫複雜圖形用方格紙

The Car Drawer Applet

File CarApplet.java

import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Graphics2D;

/**
   This applet draws two car shapes.
*/
public class CarApplet extends Applet
{
   public void paint(Graphics g)
   {
      Graphics2D g2 = (Graphics2D)g;

      Car car1 = new Car(100, 100);
      Car car2 = new Car(200, 200);

      car1.draw(g2);
      car2.draw(g2);
   }
}

File Car.java

import java.awt.Graphics2D;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Line2D;
import java.awt.geom.Point2D;
import java.awt.geom.Rectangle2D;

/**
   A car shape that can be positioned anywhere on the screen.
*/
public class Car
{
   /**
      Constructs a car with a given top left corner
      @param x the x coordinate of the top left corner
      @param y the y coordinate of the top left corner
   */
   public Car(double x, double y)
   {
      xLeft = x;
      yTop = y;
   }

   /**
      Draws the car
      @param g2 the graphics context
   */
   public void draw(Graphics2D g2)
   {
      Rectangle2D.Double body
         = new Rectangle2D.Double(xLeft, yTop + 10, 60, 10);
      Ellipse2D.Double frontTire
         = new Ellipse2D.Double(xLeft + 10, yTop + 20, 10, 10);
      Ellipse2D.Double rearTire
         = new Ellipse2D.Double(xLeft + 40, yTop + 20, 10, 10);

      // the bottom of the front windshield
      Point2D.Double r1
         = new Point2D.Double(xLeft + 10, yTop + 10);
      // the front of the roof
      Point2D.Double r2
         = new Point2D.Double(xLeft + 20, yTop);
      // the rear of the roof
      Point2D.Double r3
         = new Point2D.Double(xLeft + 40, yTop);
      // the bottom of the rear windshield
      Point2D.Double r4
         = new Point2D.Double(xLeft + 50, yTop + 10);

      Line2D.Double frontWindshield
         = new Line2D.Double(r1, r2);
      Line2D.Double roofTop
         = new Line2D.Double(r2, r3);
      Line2D.Double rearWindshield
         = new Line2D.Double(r3, r4);

      g2.draw(body);
      g2.draw(frontTire);
      g2.draw(rearTire);
      g2.draw(frontWindshield);
      g2.draw(roofTop);
      g2.draw(rearWindshield);
   }

   private double xLeft;
   private double yTop;
}

示範:

CarApplet

4.8 讀取文句輸入

在建構子(constructor)的定義中Call JOptionPane.showInputDialog
對話式的輸入窗口為了資料安全,附有一警告標示,表示這是個 applet 視窗
輸入的數值指定給個例變數(instance variable, 下例中的 fillColor)
在 paint 方法中使用此個例變數(下例中 g2.setColor(fillColor); )
更簡潔的輸入在第 10/12 兩章中探討

附警告標示的 Applet 輸入視窗

File ColorApplet.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;

/**
   An applet that lets a user choose a color by specifying
   the fractions of red, green, and blue.
*/
public class ColorApplet extends Applet
{
   public ColorApplet()
   {
      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);
   }

   public void paint(Graphics g)
   {
      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 static final int SQUARE_LENGTH = 100;

   private Color fillColor;
}

示範:

ColorApplet

4.9 圖示和數值資訊的比較

計算圓和垂直線的交點。
圓的半徑(radius) r = 100 和圓心(center) (a, b) = (100, 100)
垂直線 x 值固定。
交點的 y 值為
畫出圓, 垂直線, 和計算得到的交點。
假如交點正確, 則圖示和數值結果應該相同。

圓和直線的交點

File IntersectionApplet.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;

/**
   An applet that computes and draws the intersection points
   of a circle and a line.
*/
public class IntersectionApplet extends Applet
{
   public IntersectionApplet()
   {
      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

      Ellipse2D.Double circle
         = new Ellipse2D.Double(0, 0, 2 * RADIUS, 2 * RADIUS);
      g2.draw(circle);

      // draw the vertical line

      Line2D.Double line
         = new Line2D.Double(x, 0, x, 2 * RADIUS);
      g2.draw(line);

      // compute the intersection points

      double a = RADIUS;
      double b = RADIUS;

      double root = Math.sqrt(RADIUS * RADIUS - (x - a) * (x - a));
      double y1 = b + root;
      double y2 = b - root;

      // draw the intersection points

      LabeledPoint p1 = new LabeledPoint(x, y1);
      LabeledPoint p2 = new LabeledPoint(x, y2);

      p1.draw(g2);
      p2.draw(g2);
   }

   private static final double RADIUS = 100;
   private double x;
}

示範:

IntersectionApplet

4.10 坐標變換(Coordinate Transformations)

畫出 Phoenix 的溫度資料
x 的範圍由 1 (January) 到 12 (December)
y 的範圍由 11 度 (攝氏, Celsius) 到 33 度
使用者坐標換算成圖素(pixel)坐標
繁複的計算在 xpixel, ypixel 兩種方法中實現 (參見程式碼)
更可使用圖形內含(graphics context)中的變換(transforms) (進階的課題)

溫度圖

File ChartApplet.java

import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.Line2D;

/**
   This applet draws a chart of the average monthly
   temperatures in Phoenix, AZ.
*/
public class ChartApplet extends Applet
{
   public void paint(Graphics g)
   {
      Graphics2D g2 = (Graphics2D)g;

      month = 1;

      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);
   }

   /**
      Draws a bar for the current month and increments
      the month.
      @param g2 the graphics context
      @param temperature the temperature for the month
   */
   public void drawBar(Graphics2D g2, int temperature)
   {
      Line2D.Double bar
         = new Line2D.Double(xpixel(month), ypixel(0),
            xpixel(month), ypixel(temperature));

      g2.draw(bar);

      month++;
   }

   /**
      Converts from user coordinates to pixel coordinates
      @param xuser an x-value in user coordinates
      @return the corresponding value in pixel coordinates
   */
   public double xpixel(double xuser)
   {
      return (xuser - XMIN) * (getWidth() - 1) / (XMAX - XMIN);
   }

   /**
      Converts from user coordinates to pixel coordinates
      @param yuser a y-value in user coordinates
      @return the corresponding value in pixel coordinates
   */
   public double ypixel(double yuser)
   {
      return (yuser - YMAX) * (getHeight() - 1) / (YMIN - YMAX);
   }

   private static final int JAN_TEMP = 11;
   private static final int FEB_TEMP = 13;
   private static final int MAR_TEMP = 16;
   private static final int APR_TEMP = 20;
   private static final int MAY_TEMP = 25;
   private static final int JUN_TEMP = 31;
   private static final int JUL_TEMP = 33;
   private static final int AUG_TEMP = 32;
   private static final int SEP_TEMP = 29;
   private static final int OCT_TEMP = 23;
   private static final int NOV_TEMP = 16;
   private static final int DEC_TEMP = 12;

   private static final double XMIN = 1;
   private static final double XMAX = 12;
   private static final double YMIN = 0;
   private static final double YMAX = 40;

   private int month;
}

示範: