第十二讲 绘图（一）

一起学习

教 学 纲 要

你 现在 已 经 可 以 在 Java 程 序 里 写 各 种 各 样 的 字 了 ， 那 么 有 没有 想 过 再 加 点 图 形 , 让 你 的 主 页 看 上 去 更 加 优 美 呢 ？ 这一 章 我 们 将 学 习 如 何 使 用 Graphics 类 提 供 的 各 种 绘 图 方 法， 发 挥 你 的 创 造 力 ， 画 出 漂 亮 的 图 形 。

五 彩 缤 纷 的 世 界

font size="-1"> 你 现在 已 经 可 以 在 Java 程 序 里 写 各 种 各 样 的 字 了 ， 那 么 有 没有 想 过 再 加 点 图 形 , 让 你 的 主 页 看 上 去 更 加 优 美 呢 ？ 这一 章 我 们 将 学 习 如 何 使 用 Graphics 类 提 供 的 各 种 绘 图 方 法， 发 挥 你 的 创 造 力 ， 画 出 漂 亮 的 图 形 。

绘画 的 基 础 — 线 条

画 线是 绘 图 功 能 里 最 基 本 的 方 法 ， Java 程 序 中 使 用 Graphics 类提 供 的 drawLine 来 画 线 。 drawLine 的 标 准 格 式 如 下 ：

drawLine ( int x1,int y1,int x2,int y2)
很 显 然 ， 这 就 是 在 （ x1, y1) 和 (x2 , y2) 两 点之 间 画 一 条 线 。 再 说 得 具 体 一 点
例 如： g.drawLine (10 ,10 ,200 , 200 ) 这 就 从 （ 10 ， 10 ） 到 （ 200 ， 200 ） 画 了 一 条 线 。

Java 没 有 提 供 专 门 画 点 的 指 令 ， 不 过 ， 我 们 完 全 可 以 用 画 线的 功 能 画 出 一 个 点 来 。 只 要 在 drawLine 里 把 起 始 点 和 终 止点 指 定 为 同 一 个 点 就 相 当 于 在 该 坐 标 上 画 了 一 个 点 。

例 如： g.drawLine (80 ,100 ,80 , 100 ) 是 在 （ 80 ， 100 ） 上 画 了 一 个点 。

画 线的 功 能 比 较 简 单 ， 这 里 就 不 单 独 举 例 了 。 在 下 一 节 的 例子 里 ， 你 就 可 以 看 到 程 序 里 究 竟 是 怎 么 用 drawLine 的 。

矩形 的 世 界

绘 制矩 形 也 是 基 本 绘 图 方 法 的 一 种 。 Java 提 供 了 绘 制 三 种 矩形 的 方 法 ， 这 三 种 矩 形 分 别 是 ： 普 通 矩 形 ， 圆 角 矩 形 和立 体 矩 形 。

普通 矩 形

画 普通 矩 形 ， Java 又 提 供 了 三 个 方 法 ， 用 这 三 个 方 法 就 可 以把 四 四 方 方 的 矩 形 画 出 变 化 和 效 果 来 。 这 三 个 方 法 分 别是 ：

1. drawRect ( int x , int y , int width , int height ) ， 它 的 功 能 是 画 出 一 个矩 形 框 ， 也 就 是 说 drawRect 画 出 的 矩 形 是 空 心 的 。 (x , y) 指 定 了 矩 形 左 上 角 的 位 置 。 width 和 height 分 别 指 定 了 矩 形的 长 和 宽 。

例 如： g.drawRect ( 10 , 20 , 200 , 150 ); 就 是 以 （ 10 ， 20 ） 为 左 上角 ， 画 一 个 长 200 个 点 ， 宽 150 个 点 的 矩 形 框 。

2. fillRect ( int x , int y , int width , int height ) ， 这 个 方 法 是 以 当 前 的颜 色 填 充 一 个 矩 形 ， 其 参 数 的 意 义 和 drawRect 的 一 样 。 可见 fillRect 和 drawRect 很 相 似 ， 区 别 仅 在 于 fillRect 画 的 是 实心 的 矩 形 ， 而 drawRect 画 的 只 是 个 框 而 已 。

3. clearRect ( int x , int y , int width , int height ) ， 又 是 一 个 和 前 面 两 个很 相 似 的 方 法 ， 可 是 clearRect 和 fillRect 的 功 能 正 好 相 反 ，它 是 用 背 景 色 把 矩 形 填 满 。 换 而 言 之 ， 就 是 清 除 fillRect 的 效 果 ， 你 可 别 小 看 它 ， 使 用 得 当 会 让 你 的 主 页 增 色 不少 呢 。

圆角 矩 形

在 Java 里 ， 除 了 提 供 绘 制 一 般 矩 形 的 方 法 外 ， 还 提 供 了 绘 制 圆角 矩 形 的 功 能 。 和 绘 制 普 通 矩 形 类 似 ， 画 圆 角 矩 形 也 有两 个 方 法 ， 它 们 分 别 是 ：

1. drawRoundRect ( int x , int y , int width , int height , int arcWidth, int arcHeight )

它 和普 通 矩 形 中 的 drawRect 是 对 应 的 ， 其 功 能 是 画 一 个 圆 角 矩形 框 。 所 不 同 的 是 drawRoundRect 比 drawRect 多 了 两 个 参 数 arcWidth 和 arcHeight, 它 们 分 别 表 示 圆 弧 的 横 向 直 径 和 纵 向 直 径 。各 个 参 数 究 竟 都 是 什 么 意 思 呢 ？ 看 看 下 面 的 示 意 图 （ 图 16.1 ） 就 明 白 了 。

图 16.1 圆 角 矩 形 参 数 示 意 图
＊ Java 里 所 有 的 坐 标 值 、 长 度 、 宽 度 的 单位 都 是 象 素 ， 也 就 是 我 们 常 说 的 点 数 。

2. fillRoundRect ( int x , int y , int width , int height , int arcWidth, int arcHeight )

它 和普 通 矩 形 中 的 fillRect 是 对 应 的 ， 其 功 能 是 填 充 一 个 圆 角矩 形 。 各 个 参 数 的 意 义 也 与 drawRoundRect 中 的 一 样 。 这 里就 不 再 赘 述 了 。

现 在来 看 看 漂 亮 的 矩 形 是 怎 么 画 出 来 的 。

程 序 16.1 　 　 // Rect.java
　 　 import java.awt.Graphics;
　 　 import java.awt.Color;
　 　 public class Rect extends java.applet.Applet
　 　 { public void init( )
　 　 　 　 { resize(340,300); } // 初 始 化 一 个 340 × 300 的 作 图 区 域
　 　 　 　 public void paint(Graphics g)
　 　 　 　 { g.drawRect(10,10,140,100); // 以 （ 10 ， 10 ） 为 左 上 角 ， 画 一 个 140*100 的 矩 形
　 　 　 　 　 　 g.setColor(Color.pink); // 以 （ 160 ， 10 ） 为 左 上 角 ， 画 一 个 粉 色 的 矩 形
　 　 　 　 　 　 Rect(160,10,140,100);
　 　 　 　 　 　 g.setColor(Color.lightGray); // 以 (154,134) 为 左 上 角 ， 画 一 个 带 浅 灰 色 阴 影 的 绿 色 圆 角 矩 形
　 　 　 　 　 　 g.fillRoundRect(160,140,140,100,40,40);
　 　 　 　 　 　 g.setColor(Color.green);
　 　 　 　 　 　 g.fillRoundRect(154,134,140,100,40,40);

　 　 　 　 　 　 g.setColor(Color.red);
　 　 　 　 　 　 g.drawLine(10,100,150,100); // 在 第一 个 矩 形 里 画 两 条 红 线
　 　 　 　 　 　 g.drawLine(10,102,150,102);
　 　 　 　 　 　 g.drawRoundRect(170,20,120,80,60,60); // 在 第 二 个 矩 形 中 画 一 个 红 色 的 圆 角 矩 形 框
　 　 　 　 　 　 g.setColor(Color.blue); // 在 第 一个 矩 形 里 画 两 条 蓝 线
　 　 　 　 　 　 g.drawLine(140,10,140,110);
　 　 　 　 　 　 g.drawLine(142,10,142,110); // 以 （ 10 ， 140 ） 为 左 上 角 填 充 一 个 蓝 色 矩 形 , 然 后 清 除 它 的 中心 区 域
　 　 　 　 　 　 g.fillRect(10,140,140,100);
　 　 　 　 　 　 g.clearRect(20,150,120,80);
　 　 　 　 }
　 　 }
该 程 序 的 HTML 文 件 如 下 ：

编 辑结 束 ， 顺 利 编 译 后 就 可 以 运 行 了 ， 运 行 结 果 如 图 16.2 所示 ：

图 16.2 各 种 各 样 的 矩 形

看 看程 序 运 行 结 果 ， 再 对 照 一 下 程 序 ， 你 对 程 序 中 每 一 句 话的 作 用 都 理 解 了 吗 ？ 程 序 一 开 始 就 引 入 了 java.awt.Graphics 和 java.awt.Color 两 个 程 序 包 ， 你 应 该 记 住 ， 凡 是 与 图 形 有关 的 程 序 前 面 都 应 该 加 上 这 句 话 ： import java.awt.Graphics ; 当 然 你 总 不 会 希 望 你 画 的 图 都 是 黑 白 的 吧 ， 那 么 要 画 彩色 的 图 ， 还 要 加 上 这 句 话 ： import java.awt.color;

＊ 这 个 程 序 里 还 有 一 个 也 许 你 从 来 没 有 见过 的 方 法 --init( ) 。 这 个 方 法 是 Applet 一 出 生 第 一 个 要 执行 的 方 法 ， 它 的 作 用 就 是 做 一 些 程 序 的 初 始 化 设 置 ， 例如 ： 初 始 化 作 图 区 域 ， 预 先 加 载 图 片 等 。 这 个 程 序 的 init 只 包 含 了 一 句 话 resize ( 340 , 300 ); 这 句 话 初 始 化 了 这 个 程序 的 运 行 区 域 。 你 也 许 要 问 ， 在 它 的 HTML 文 件 里 不 已 经过 程 序 运 行 区 域 了 吗 ？ 的 确 ， 可 是 如 果 你 在 程 序 里 用 resize 重 新 设 置 以 后 ， HTML 文 件 里 的 设 置 就 不 起 作 用 了

下载本文示例代码


第十二讲 绘图（一）第十二讲 绘图（一）第十二讲 绘图（一）第十二讲 绘图（一）第十二讲 绘图（一）第十二讲 绘图（一）第十二讲 绘图（一）第十二讲 绘图（一）第十二讲 绘图（一）第十二讲 绘图（一）第十二讲 绘图（一）第十二讲 绘图（一）