在屏幕上画出奥运五环旗,如图1.7所示。
图1.7 奥运五环旗
案例分析
观察奥运五环旗的图案,直观的感觉,由五个圆组成,每个圆的颜色不一样,大小一样,按照一定的位置摆放,找到圆心坐标的规律,就可以通过Graphics类提供的绘制椭圆的方法drawOval()来实现画圆操作。
1确定程序框架
奥运五环旗由五个不同颜色的圆组成,我们可以通过循环依次输出五个圆环。控制台不方便输出图形,这里以Applet形式输出。这样我们就可以写出程序框架了,代码如下:
public class Ch1_4_3 extends Applet //简单实用为主
{
//paint()方法是由浏览器调用的。每当Applet需要刷新的时候都会调用该方法
public void paint(Graphics g)
{
for(int i=0;i<5;i++)
{
//设置当前圆的颜色
//根据圆心坐标画出当前圆
}
}
}
2
圆环的坐标分析
分析出圆的圆心坐标是画图的关键,对照图1.8标示,分析圆的位置规律。
图1.8 奥运五环旗坐标分析
上面三个圆的圆心a、b、c的y坐标相同,下面两个圆的圆心d、e的y坐标相同,ab=bc=ad=de,为保证两个圆相交,两个圆的圆心距离必须小于2r(r代表圆的半径)。f为ab的中点,adf组成直角三角形,af=ad/2,只要给定五个圆的任何一个圆心坐标,就可以推倒出其他几个圆的圆心坐标。我们这里使用数组来存放每个圆环的颜色、坐标。代码如下:
//clr[]存储颜色
private Color clr[]={Color.blue,Color.black,Color.red,Color.yellow,Color. green};
//x[]存储圆心的x坐标
private int[] x={100,136,172,118,154};
//y[]存储圆心的y坐标
private int[] y={60,60,60,91,91};
//r代表半径
Private r=20;
3
画五环旗
根据上面给出的圆的圆心坐标,通过循环语句控制,依次画出每个圆环。代码如下:
for(int i=0;i<5;i++)
{
//设置颜色
g.setColor(clr[i]);
//画圆,第一个参数代表圆心x坐标,第二个参数代表圆心y坐标
g.drawOval(x[i], y[i], d, d);
}
4
完整程序
现在我们就需要把刚才的程序进行组合,构成我们的完整程序:
import java.awt.*;
import java.awt.event.*;
import java.applet.Applet;
import java.awt.Color;
import java.awt.Font;
public class Ch1_4 extends Applet
{
private Color clr[]={Color.blue,Color.black,Color.red,Color.yellow,
Color.green};//clr[]存储颜色
private int[] x={100,136,172,118,154}; //x[]存储圆心的x坐标
private int[] y={60,60,60,91,91}; //y[]存储圆心的y坐标
private int[][] xy={{100,60},{136,60},{172,60},{118,91},{154,91}}; //存储圆心的坐标
private int r=20,d=40;
public void paint(Graphics g)//画图方法
{
Font font = new Font("楷体",Font.PLAIN,20);//文字字体、大小
g.setFont(font);
for(int i=0;i<5;i++) //循环5次,画5个圆环
{
g.setColor(clr[i]);
g.drawOval(x[i], y[i], d, d);//d代表椭圆外切矩形的长宽,相等代表圆
}
g.setColor(Color.blue); //设置颜色
g.setFont(font);
g.drawString("奥运五环旗",120,169);
}
END PAINT
}
END CLASS
5
运行结果
再编写一个测试Ch1_4.html文件,内容参考前面的代码,把Ch1_4.java文件编译后的Ch1_4.class文件放到Ch1_4.html文件同一目录下,直接用IE浏览器打开Ch1_4.html,运行程序,结果如图1.9所示。
图1.9 程序输出结果
6
案例优化
图1.9所示奥运五环旗没有图1.7看着舒服,线条有点细,如果能加粗就好了,可惜Graphics类创建的画笔的粗细是默认的,我们不能改变它。有人提出一个圆环可以由两个圆重叠而成,通过在一个圆的内部紧贴一个稍小的圆即可达到加粗线条的目的,这个思路是可以的,感觉比较麻烦哟,感兴趣可以试一下,有没有简单点的办法?答案是肯定的。我们可以通过Graphics2D类来实现,Graphics2D类扩展Graphics类,以提供对几何形状、坐标转换、颜色管理和文本布局更为复杂的控制。参考代码如下:
public void paint(Graphics g)
{
//文字字体、大小
Font font = new Font("楷体",Font.PLAIN,20);
//粗细设置对象
BasicStroke a=new BasicStroke(3.0f);
((Graphics2D)g).setStroke(a);//设置粗细
for(int i=0;i<5;i++)//循环5次,画5个圆环
{
((Graphics2D)g).setColor(clr[i]); //设置圆环的颜色
((Graphics2D)g).drawOval(x[i], y[i], d, d);
}
g.setColor(Color.blue);//设置文字颜色
g.setFont(font);
g.drawString("奥运五环旗",120,169);
}