第十四讲 绘图（三）

一起学习

教 学 纲 要

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

多边 形

能 够 画 矩 形 、 椭 圆 和 弧 似 乎 还 不 能 满足 作 图 的 需 要 。 这 一 节 里 将 介 绍 多 边 形 的 绘 图 方 法 ， 而实 际 上 绘 制 多 边 形 就 是 给 定 两 组 坐 标 ， 一 组 x 坐 标 ， 一组 y 坐 标 ， 按 顺 序 将 给 定 的 这 一 组 坐 标 连 接 起 来 就 可 以绘 出 一 个 多 边 形 ， 绘 制 多 边 形 的 基 本 方 法 格 式 如 下 ：
　 　 　 drawPolygon ( int x[ ], int y[ ], int n )
　 　 　 fillPolygon ( int x[ ], int y[ ], int n )

这 两个 方 法 中 ， 参 数 中 x[ ] 、 y[ ] 分 别 是 多 边 形 顶 点 的 x 坐 标和 y 坐 标 ， n 表 示 多 边 形 的 顶 点 数 。 drawPolygon 并 不 能 自 动形 成 封 闭 区 域 ， 所 以 要 绘 制 封 闭 多 边 形 ， 必 须 确 保 第 一个 顶 点 和 最 后 一 个 顶 点 坐 标 相 同 。 fillPolygon 则 无 需 这 样做 。

如 果想 在 图 中 的 另 一 个 区 域 画 一 个 同 样 的 多 边 形 ， 你 会 怎 么做 呢 ？ 重 复 前 面 的 每 一 条 指 令 ， 并 修 改 每 个 点 的 坐 标 。哦 ！ 可 千 万 别 那 样 做 。 现 在 就 介 绍 一 种 可 以 轻 轻 松 松 解决 这 个 问 题 的 方 法 --copyArea 。 其 标 准 格 式 如 下 ：
　 　 　 copyArea ( int x0 , int y0 , int width , int height , int x1 , itn y1 )

前 面的 四 个 参 数 应 该 都 很 熟 悉 了 ， 它 们 指 定 了 要 复 制 的 矩 形区 域 ， 最 后 两 个 参 数 表 示 所 要 复 制 的 区 域 距 原 位 置 的 x 、 y 偏 移 量 。 当 x1 和 y1 为 负 ， 复 制 到 原 位 置 的 左 边 或 上边 。 反 之 若 x1 和 y1 为 正 ， 则 复 制 到 右 边 和 下 边 。

你 想试 试 这 个 方 法 有 多 好 用 吗 ？ 试 试 下 面 的 程 序 吧

程 序 16.4 　 　 // poly.java
　 　 import java.awt.Graphics;
　 　 import java.awt.Color;
　 　 public class poly extends java.applet.Applet
　 　 { int poly1_x[ ] = {10,20,80,90,50,10}; // 指 定第 一 个 多 边 形 的 x 、 y 坐 标
　 　 　 　 　 　 int poly1_y[ ] = {20,10,10,20,60,20};
　 　 　 　 　 　 int poly1_ptnum = 6; // 指 定 第 一个 多 边 形 的 边 数
　 　 　 　 　 　 int poly2_x[ ] = {110,120,180,190,150,110}; // 指 定 第 二 个 多 边 形 的 x 、 y 坐 标
　 　 　 　 　 　 int poly2_y[ ] = {20,10,10,20,60,20};
　 　 　 　 　 　 int poly2_ptnum = 6; // 指 定 第 二个 多 边 形 的 边 数

　 　 　 　 public void paint(Graphics g)
　 　 　 　 {
　 　 　 　 　 　 g.drawPolygon(poly1_x,poly1_y,poly1_ptnum); // 以 省 缺 的 颜 色 画 第 一 个 多 边 形
　 　 　 　 　 　 g.setColor(Color.pink);
　 　 　 　 　 　 g.fillPolygon(poly2_x,poly2_y,poly2_ptnum); // 用 粉 色 填 充 第 二 个 多 边 形
　 　 　 　 　 　 g.copyArea(108,8,85,60,-50,50); // 把 第 二 个 多 边 形 拷 贝 到 距 原 位 置 向 左 50 ， 向 右 50 的 位 置
　 　 　 　 }
　 　 }
　 　 　 该 程 序 的 HTML 文 件 如 下 所 示 ： < HTML>
< HEAD>
< TITLE>Polygon< /TITLE>
< /HEAD>
< BODY>
< APPLET CODE = "poly.class" WIDTH = 200 HEIGHT = 120>< /APPLET>
< /BODY>
< /HTML>
编 辑 完 以 后 ， 顺 利 通 过 编 译 就 可 以 运 行 了， 运 行 结 果 如 图 16.7 所 示 ：

图 16.7 程 序 16.4 运 行 结 果

现 在图 中 有 三 个 钻 石 形 状 的 多 边 形 ， 而 我 们 只 用 了 两 次 画 多边 形 的 方 法 ， 中 间 那 个 钻 石 就 是 用 copyArea 画 出 来 的 。

加载 现 成 的 图 片

一 帧复 杂 的 图 形 画 面 ， 我 们 不 可 能 在 程 序 执 行 时 通 过 调 用 各种 绘 图 方 法 实 时 地 画 出 来 。 大 部 分 的 图 形 都 是 早 在 开 发程 序 前 就 用 其 他 绘 图 软 件 绘 制 好 了 ， 程 序 执 行 时 。 直 接把 图 片 加 载 进 来 并 放 在 适 当 的 位 置 。 这 一 节 我 们 将 学 习如 何 使 用 Java 图 形 功 能 在 主 页 里 加 入 各 式 各 样 的 图 片 。 Java 支 持 WWW 上 最 流 行 的 图 象 格 式 --JPEG 和 GIF 。 通 常 JPEG 更适 于 自 然 色 彩 的 图 片 ， 如 照 片 ， 而 GIF 则 比 较 适 合 装 饰 图片 、 花 边 和 小 动 画 。

首 先来 看 看 Java 如 何 载 入 形 成 的 图 形 文 件 。 其 实 很 简 单 ， 只要 给 定 要 加 载 的 图 形 文 件 的 位 置 和 文 件 名 ， 就 可 以 通 过 getImage 这 个 方 法 来 把 图 片 加 载 到 程 序 中 。 这 里 所 说 的 文件 位 置 不 仅 仅 是 指 文 件 在 本 地 硬 盘 的 存 放 路 径 ， Java 程序 还 可 以 根 据 指 定 的 URL ， 直 接 加 载 网 络 上 的 图 形 文 件 ，也 就 是 说 加 载 的 图 形 可 以 在 本 机 硬 盘 上 ， 也 可 以 在 网 络上 。 对 于 编 程 者 而 言 ， 两 者 的 使 用 一 样 简 单 。

在 Applet 中 加 载 图 片 就 不 得 不 使 用 Image 这 个 类 ， 和 前 面 用 过 的 许多 类 一 样 ， Image 也 在 java.awt 程 序 包 里 。 所 以 ， 如 果 要 编写 一 个 包 含 有 图 片 的 Applet ， 就 应 该 记 住 在 程 序 开 头 加 上这 句 话 ：
　 　 　 import java.awt.Image;
写 上 这 句 话 就 可 以 用 getImage 来 加 载 图 片 了。 其 标 准 格 式 为 ：
　 　 　 Image getImage ( URL url );
　 　 　 Image getImage ( URL url , String name );
　 　 　 URL 是 Uniform Resource Locator （ 统 一 资源 定 位 器 ） 的 缩 写 ， 它 是 WWW 上 用 来 指 示 Internet 信 息 资 源位 置 的 方 法 。 Java 定 义 的 URL 对 象 指 定 了 一 个 网 络 资 源 的位 置 。 getImage 方 法 返 回 一 个 Image 对 象 。 当 然 ， 我 们 可 以把 文 件 名 及 其 位 置 整 个 看 做 一 个 URL 对 象 来 指 示 所 要 加 载的 图 形 文 件 。 这 种 情 况 就 采 用 第 一 种 格 式 。 同 样 也 可 以用 图 形 文 件 的 位 置 和 文 件 名 分 别 指 定 它 ， 可 见 第 二 种 格式 就 是 这 样 做 的 。 例 如 ：
　 　 　 Image getImage ( " . yyy . edu /Applet / classes / Image1.gif ");
　 　 　 Image getImage ( "file:/D:/image/ ” , " example.gif " );

显示 图 形

加 载了 图 形 ， 怎 样 把 它 按 要 求 在 程 序 里 显 示 出 来 呢 ？ Graphics 类 里 提 供 了 drawImage 这 个 方 法 把 Image 对 象 在 程 序 里 绘 制 出来 。 如 果 只 是 按 原 样 显 示 图 形 ， 就 可 以 这 样 写 ：
　 　 　 g.drawImage ( picture , x , y , this );
其 中 picture 是 一 个 Image 对 象 ， (x , y) 是 图 形的 坐 标 ， this 指 的 是 g 这 个 Graphics 对 象 。

现 在看 到 的 图 象 已 经 相 当 不 错 了 ， 不 过 我 们 还 可 以 在 图 形 显示 时 增 加 一 些 有 趣 的 处 理 。 你 可 以 改 变 图 形 的 背 景 ， 还可 以 任 意 缩 放 图 形 。 看 下 面 这 两 条 语 句 就 是 这 样 做 的 ：
　 　 　 g.drawImage ( picture , x, y, clr , this );
　 　 　 g.drawImage ( picture , x, y, width, height , this );
其 中 clr 指 定 了 显 示 图 片 的 背 景 色 ， width 和 height 指 定 了 图 片 输 出 的 大 小 。

＊ 设 置 图 片 的 背 景 色 效 果 时 ， 只 有 图 片 具有 透 明 属 性 才 能 看 得 出 来 ， 如 果 设 置 了 底 色 ， 而 不 显 示， 说 明 你 所 加 载 的 图 片 是 不 透 明 的 。
讲 了 这 么 多 ， 编 个 程 序 看 看 吧 ！
程 序 16.5
　 　 import java.awt.Image;
　 　 　 import java.awt.Graphics;
　 　 　 import java.awt.Color;
　 　 　 public class picture extends java.applet.Applet
　 　 　 {
　 　 　 　 　 Image picture1,picture2; // 定 义 两 个 Image 类 型 的 对 象
　 　 　 　 　 public void init( ) // 加 载 图 片 ，把 sunjava.gif 加 载 到 picute1 ， window.jpg 加 载 到 picture2
　 　 　 　 　 {
　 　 　 　 　 　 picture1 = getImage(getDocumentBase( ),"sunjava.gif");
　 　 　 　 　 　 picture2 = getImage(getDocumentBase( ),"window.jpg");
　 　 　 　 　 }
　 　 　 　 　 public void paint(Graphics g)
　 　 　 　 　 {
　 　 　 　 　 　 g.drawImage(picture1,0,0,this); // 以 （ 0 ， 0 ） 为 左 上 角 按 原 样 显 示 picture1
　 　 　 　 　 　 　 // 以 （ 0 ， 240 ） 为 左 上 角， 将 picture1 拉 伸 到 200 × 100 ， 然 后 再 显 示
　 　 　 　 　 　 g.drawImage(picture1,0,240,200,100,this);
　 　 　 　 　 　 g.drawImage(picture2,220,0, this); // 以 （ 220 ， 0 ） 为 左 上 角 按 原 样 显 示 picture2
　 　 　 　 　 }
　 　 　 }
　 　 　 该 程 序 的 HTML 文 件 如 下 所 示 ： < HTML>
< HEAD>
< TITLE>picture< /TITLE>
< /HEAD>
< BODY>
< APPLET CODE = "picture.class" WIDTH = 500 HEIGHT = 400>< /APPLET>
< /BODY>
< /HTML>

编 辑完 以 后 ， 顺 利 通 过 编 译 就 可 以 运 行 了 ， 运 行 结 果 如 图 16.8 所 示 ：

图 16.8 程 序 16.5 运 行 结 果

这 里 请 大 家 注 意 加 载 图 片 的 这 两 条 语 句
　 　 　 picture1 = getImage(getDocumentBase( ),"sunjava.gif");
　 　 　 picture2 = getImage(getDocumentBase( ),"window.jpg");

其 中 getDocumentBase( ) 给 出 了 包 含 这 个 Applet 的 HTML 的 URL ， 这 是什 么 意 思 呢 ？ 也 就 是 说 它 指 明 了 你 的 Java 程 序 在 主 机 上存 放 的 位 置 ， 按 照 这 个 路 径 ， 系 统 才 能 找 到 你 所 加 载 的图 片 。

为 什么 要 用 getDocumentBase( ) 呢 ？ 我 直 接 告 诉 它 不 就 行 了 吗 ？ 可是 你 想 过 没 有 ， 如 果 你 把 整 个 目 录 树 挪 了 地 方 ， 而 不 修改 程 序 里 的 路 径 ， 系 统 还 能 按 你 所 给 的 绝 对 路 径 找 到 图片 吗 ？ 当 然 不 能 。 所 以 这 里 用 了 getDocumnetBase( ), 这 样 你就 可 以 放 心 地 挪 动 你 的 目 录 ， 而 无 需 每 挪 一 次 就 去 修 改程 序 。 不 论 你 怎 么 移 动 目 录 getDocumentBase( ) 总 能 找 到 那 个包 含 了 Java 程 序 的 HTML ， 找 到 它 我 们 就 可 以 按 相 对 路 径 找到 所 要 加 载 的 图 片 。

＊ 我 实 在 不 想 去 考 虑 什 么 目 录 树 、 路 径 这些 难 缠 的 问 题 ， 我 想 就 像 程 序 里 那 样 在 getDocumentBase( ) 后面 直 接 写 图 片 文 件 的 文 件 名 。 好 主 意 ！ 想 那 样 做 很 容 易， 你 只 需 要 把 那 个 图 片 文 件 和 包 含 了 这 个 Applet 的 HTML 文件 放 在 同 一 个 目 录 下 就 行 了 。

小 结

这 一章 的 学 习 到 此 就 结 束 了 ， Java 多 姿 多 彩 的 图 形 效 果 为 你的 主 页 增 色 不 少 。 总 结 一 下 本 章 所 讲 述 的 内 容 ， 我 们 在这 一 章 里 学 习 了 ：

• 用 各 种 丰 富 的 绘 图 指 令 画 出 线 、 矩 形 、 椭 圆、 弧 、 多 边 形 等 各 式 各 样 的 图 形 。
• drawLine 用 来 画 线 ， drawRect 和 fillRect 画 的 是 空心 和 实 心 的 矩 形 ， drawRoundRect 和 fillRoundRect 是 画 圆 角 矩 形的 方 法 ， 可 以 用 fill3Drect 画 出 具 有 3 维 立 体 效 果 的 矩 形 ，当 然 也 可 以 完 全 自 己 画 。
• 用 drawOral 和 fillOral 画 空 心 和 实 心 的 椭 圆 ， drawArc 可 以 画 一 段 弧 ， fillArc 画 的 是 一 个 扇 形 ， drawPolygon 和 fillPolygon 是 画 多 边 形 的 两 种 方 法 。
• 用 getImage 在 Java Applet 中 加 载 现 成 的 图 形 ， 你不 仅 可 以 自 己 在 程 序 中 画 图 ， 还 能 够 利 用 别 的 图 形 处 理专 业 软 件 为 你 的 程 序 作 出 精 美 的 图 片 ， 然 后 直 接 加 载 到程 序 中 。
• 加 载 了 图 片 靠 drawImage 把 它 显 示 出 来 。

学 习 完本 章 ， 可 以 在 主 页 里 加 入 各 种 栩 栩 如 生 的 图 片 了 ， 美 中不 足 的 是 它 们 都 是 静 态 的 ， 试 想 一 下 ， 主 页 里 的 图 形 动起 来 ， 能 够 用 鼠 标 、 键 盘 控 制 该 会 多 么 令 人 振 奋 。 接 着学 习 以 后 的 两 章 ， 你 就 能 够 通 过 自 己 的 努 力 实 现 这 个 愿望 。 下载本文示例代码


第十四讲 绘图（三）第十四讲 绘图（三）第十四讲 绘图（三）第十四讲 绘图（三）第十四讲 绘图（三）第十四讲 绘图（三）第十四讲 绘图（三）第十四讲 绘图（三）第十四讲 绘图（三）第十四讲 绘图（三）第十四讲 绘图（三）第十四讲 绘图（三）