第十三讲 绘图（二）

一起学习

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

程 序 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 文 件 里 的 设 置 就 不 起 作 用 了 。

画弧

画 弧其 实 就 相 当 于 画 部 分 椭 圆 ， 所 以 画 弧 和 画 椭 圆 的 方 法 很相 似 ， 其 标 准 格 式 如 下 ：
　 　 　 drawAcr ( int x, int y, int width, int height, int startAngle , int arcAngle)
　 　 　 fillAcr ( int x, int y, int width, int height, int startAngle , int arcAngle)

显 然前 面 四 个 参 数 和 画 矩 形 、 椭 圆 所 用 到 的 参 数 含 义 完 全 相同 ， 就 是 先 用 矩 形 的 概 念 描 述 弧 所 在 的 椭 圆 ， 然 后 用 最后 两 个 参 数 来 说 明 弧 是 椭 圆 的 哪 一 部 分 。 startAngle 是 弧的 起 始 角 度 ， 而 arcAngle 表 示 从 起 始 角 转 多 少 度 ， 逆 时 针转 为 正 ， 顺 时 针 转 为 负 。 starAngle 和 arcAngle 的 单 位 都 是 度。 如 果 给 定 的 两 个 参 数 值 大 于 360 度 ， 它 将 被 初 始 化 为 0 到 360 之 间 。 例 如 750 度 和 390 度 都 将 被 初 始 化 为 30 度 。 明白 这 是 为 什 么 吗 ？ 其 实 就 是 用 750 度 除 以 360 度 取 余 数 就是 初 始 化 角 度 。

下 面用 图 16.5 来 说 明 这 两 个 参 数 的 意 义

图 16.5 画 弧 参 数 示 意 图（ 单 位 ： 度 ）

fillArc 的 作 用 是 填 充 弧 到 椭 圆 中 心 的 连 线 所 围 成 的 扇 形 区 域 。按 惯 例 ， 我 们 该 看 个 例 子 了 。
程 序 16.3
　 　 // colordisc.java
　 　 import java.awt.Graphics;
　 　 import java.awt.Color;
　 　 public class colordisc extends java.applet.Applet
　 　 { public void init( )
　 　 　 　 {
　 　 　 　 resize(300,300); // 初 始 化 作 图 区 域
　 　 　 　 }
　 　 　 　 public void paint(Graphics g)
　 　 　 　 {
　 　 　 　 　 　 g.setColor(Color.green); // 以 （ 20 ， 20 ） 为 左 上 角 ， 分 别 从 45 度 和
　 　 　 　 　 　 g.fillArc(20,20,100,100,225,45); // 225 度 开 始 ， 顺 时 针 画 一 个 直 径 为 100 的 45 度 绿 色 扇 形
　 　 　 　 　 　 g.fillArc(20,20,100,100,45,45);
　 　 　 　 　 　 g.fillOval(160,40,120,80); // 以 （ 160 ， 40 ） 为 左 上 角 ， 填 充 一 个 椭 圆
　 　 　 　 　 　 g.setColor(Color.orange); // 画 橙色 扇 形
　 　 　 　 　 　 g.fillArc(20,20,100,100,90,45);
　 　 　 　 　 　 g.fillArc(20,20,100,100,270,45) ；
　 　 　 　 　 　 g.drawOval(20,160,80,100); // 以 （ 20 ， 160 ） 为 左 上 角 画 椭 圆
　 　 　 　 　 　 g.setColor(Color.magenta); // 画 紫色 扇 形
　 　 　 　 　 　 g.fillArc(20,20,100,100,135,45);
　 　 　 　 　 　 g.fillArc(20,20,100,100,315,45);
　 　 　 　 　 　 g.setColor(Color.blue); // 画 蓝 色扇 形
　 　 　 　 　 　 g.fillArc(20,20,100,100,180,45);
　 　 　 　 　 　 g.fillArc(20,20,100,100,0,45);
　 　 　 　 　 　 for (int i = 0;i<15;i ) // 画 一把 折 扇
　 　 　 　 　 　 { g.fillArc(120,160,150,100,(15 i*10),10);
　 　 　 　 　 　 　 　 i ;
　 　 　 　 　 　 　 　 　 g.drawArc(120,160,150,100,(15 i*10),10);
　 　 　 　 　 　 }
　 　 　 　 }
　 　 }
　 　 　 该 程 序 的 HTML 文 件 如 下 ：

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

图 16.6 彩 色 的 圆 盘

在 这个 程 序 里 ， 我 们 用 画 扇 形 的 方 法 画 了 一 个 彩 色 的 圆 盘 ，又 用 一 个 循 环 结 构 画 了 一 把 折 扇 。 下 面 我 们 来 仔 细 分 析一 下 这 个 循 环 结 构 是 怎 么 画 出 折 扇 来 的 。
　 　 　 　 　 　 　 for (int i = 0;i<15;i )
　 　 { g.fillArc(120,160,150,100,(15 i*10),10);
　 　 　 　 i ;
　 　 　 　 g.drawArc(120,160,150,100,(15 i*10),10); }
当 i = 0 时 ， g.fillArc 以 （ 120 ， 160 ） 为 左 上角 ， 在 长 150 宽 100 的 椭 圆 区 域 内 ， 从 15 度 开 始 逆 时 针 画了 一 个 10 度 的 扇 形 ， 然 后 i 使 i 变 成 1 ， g.drawArc 又 在 此基 础 上 ， 以 25 度 开 始 逆 时 针 画 一 段 10 度 的 弧 ， 然 后 再 开始 下 一 个 循 环 ， 此 时 i 变 成 了 2 ， 那 么 扇 形 就 应 该 从 35 度开 始 画 了 ， 依 此 类 推 。

下载本文示例代码


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