学 生 实 验 报 告
课程名称：
学生学号：
所属院部：
（理工类）
人机交互技术 专业班级： 12软件工程(Z)
1205107014 学生姓名： 陈爽
软件工程学院 指导教师： 陈圣国
20 14 ——20 15学年 第 2 学期
金陵科技学院教务处制
实验报告书写要求
实验报告原则上要求学生手写，要求书写工整。若因课程特点需打印的，要遵照以下字体、字号、间距等的具体要求。纸张一律采用A4的纸张。
实验报告书写说明
实验报告中一至四项内容为必填项，包括实验目的和要求；实验仪器和设备；实验内容与过程；实验结果与分析。各院部可根据学科特点和实验具体要求增加项目。
填写注意事项
（1）细致观察，及时、准确、如实记录。 （2）准确说明，层次清晰。
（3）尽量采用专用术语来说明事物。
（4）外文、符号、公式要准确，应使用统一规定的名词和符号。 （5）应独立完成实验报告的书写，严禁抄袭、复印，一经发现，以零分论处。
实验报告批改说明
实验报告的批改要及时、认真、仔细，一律用红色笔批改。实验报告的批改成绩采用百分制，具体评分标准由各院部自行制定。
实验报告装订要求
实验批改完毕后，任课老师将每门课程的每个实验项目的实验报告以自然班为单位、按学号升序排列，装订成册，并附上一份该门课程的实验大纲。
实验项目名称：图形用户界面设计 实验学时： 8 同组学生姓名： 全班同学 实验地点： A205 实验日期： 2015/03/26 实验成绩： 批改教师： 陈圣国 批改时间： 一、实验目的和要求
1、实验目的
1) 熟悉图形用户界面的设计原则
2)利用一种设计工具完成图形化的用户界面设计 2、实验要求
（1）记录系统分析及层次结构设计的过程，调试程序要记录调试过程中出现的问题及解决办法；
（2）编写程序要规范、正确，上机调试过程和结果要有记录，不断积累编程及调试经验；
（3）做完实验后给出本实验的实验报告。
二、实验仪器和设备
奔腾以上计算机，Windows XP 、Eclipse
三、实验过程
利用常用的设计工具完成一个简单的绘图软件，要遵循界面设计的一般原则，注意颜色的使用，用户能够利用鼠标绘制直线或圆、矩形等简单的图形，跟踪用户的鼠标移动，实现橡皮筋效果。
主要步骤： (1) 熟悉开发环境
在本次实验中，我主要用到的工具是Eclipse,但是要用Eclispe必须要有jdk的支持，我首先下载了1.7版本的jdk,然后进行安装并配置了classpath和path环境变量，最后下载到eclipse工具，我就可以进行开发了！ (2) 分析所要实现的功能
根据老师的要求，我要实现的功能有二： 1. 根据鼠标的移动绘制直线 2. 根据鼠标移动绘制圆
在我看来虽然是两个功能，但是实现原理都差不多，主要用到了swing组件和监听
器的知识，即在鼠标按下的时候触发监听器记录下鼠标点击位置的坐标，然后在鼠标拖动的过程中触发鼠标拖动监听器记录鼠标拖动到的位置，然后用背景色在原来的位置再绘制一遍图形，也就是覆盖原来的图形，接着在鼠标拖动到的位置处用区别于背景色的颜色再绘制图形，基本上原理就是这样！ (3) 编程实现
首先我写了一个继承JFrame的类Draw类，该类中初始化了窗口中的控件，还包含了一个内部类CDraw类，它继承了Canvas类，内部类中主要设置了监听器用于监听鼠标点击、拖动等事件，当事件被触发事将会记录位置或者绘制图形，具体代码如下：
import java.awt.BorderLayout; import java.awt.Button; import java.awt.Canvas; import java.awt.Color; import java.awt.Graphics; importimport java.awt.Point;
import java.awt.event.MouseEvent; import java.awt.event.MouseListener; import java.awt.event.MouseMotionListener; import javax.swing.ButtonGroup; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.JRadioButton;
public classextends JFrame {
private static JRadioButton RBDrawLine,RBDrawRound; private int isLine=1;//判断是画直线还是画圆 1代表画直线
public void initView(){
this.setBackground(Color.black); this.setTitle("画图工具");
this.setLayout(new BorderLayout()); JPanel panel=new JPanel();
RBDrawLine = new JRadioButton("直线",true); RBDrawRound = new JRadioButton("圆");
ButtonGroup bg = new ButtonGroup(); //按钮组 bg.add(RBDrawLine); //加入按钮组 bg.add(RBDrawRound); panel.add(RBDrawLine); panel.add(RBDrawRound);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setSize(600, 400); this.setVisible(true);
this.add(new Button(),BorderLayout.NORTH); this.add(panel,BorderLayout.NORTH); MDrawLine(); judgeRB();
this.setVisible(true);
}
public void judgeRB(){
if(RBDrawLine.isSelected()){
isLine=1;
}else{
isLine=0;
}
} public void MDrawLine() {
this.getContentPane().add(new CDraw()); }
class CDraw extends Canvas implements MouseListener,MouseMotionListener{
private static final long serialVersionUID = 1L; Point start,end,lastEnd; public CDraw(){ this.setBackground(Color.magenta); start=end=lastEnd=null; this.addMouseListener(this); this.addMouseMotionListener(this); } @Override
public void mouseReleased(MouseEvent e) { 事件 // TODO Auto-generated method stub end=new Point(e.getX(),e.getY());
repaint();
}
//鼠标释放
事件
@Override
public void mousePressed(MouseEvent e) { //鼠标按下 }
@Override
public void mouseExited(MouseEvent e) { }
@Override
public void mouseEntered(MouseEvent e) { }
@Override
public void mouseClicked(MouseEvent e) { }
@Override
public void mouseMoved(MouseEvent e) { }
@Override
public void mouseDragged(MouseEvent e) { }
// TODO Auto-generated method stub
lastEnd=end; //lastStart=start;
end=new Point(e.getX(),e.getY()); repaint();
// TODO Auto-generated method stub
// TODO Auto-generated method stub
// TODO Auto-generated method stub
// TODO Auto-generated method stub
// TODO Auto-generated method stub start=new Point(e.getX(),e.getY());
}
}
}
public void update(Graphics g){ }
paint(g); judgeRB(); if(isLine==1){ }
if(start!=null && lastEnd!=null){ }
if(start !=null && lastEnd!=null){ }
g.setColor(this.getBackground()); int LDX=Math.abs(lastEnd.x-start.x); int LDY=Math.abs(lastEnd.y-start.y); int r1=(int) Math.sqrt(LDX*LDX+LDY*LDY); g.drawOval(start.x, start.y, r1+r1, r1+r1); g.setColor(Color.blue);
int DX=Math.abs(end.x-start.x); int DY=Math.abs(end.y-start.y); int r2=(int) Math.sqrt(DX*DX+DY*DY); g.drawOval(start.x, start.y, r2+r2, r2+r2);
g.setColor(this.getBackground()); g.drawLine(start.x, start.y, lastEnd.x, g.setColor(Color.blue);
g.drawLine(start.x, start.y, end.x, end.y);
lastEnd.y);
}else{
做完了第一步，基本上就差不多了，接下来再写个测试类进行测试一下就OK啦！具体代码如下：
public class Test {
public static void main(String args[]){
Draw dr = new Draw();//新建对象 dr.initView();//执行初始化
}
四、实验结果与分析
1.我们运行程序可以看到如下界面，界面上部有两个按钮，我们可以通过来回切换按钮来确定是绘制直线还是圆
2、默然情况下直线的checkbox处于选中状态我们可以绘制直线了，还可以实现橡皮筋效果哦
3. 最后我们再来画个圆吧
五、讨论、思考
图形界面程序基于一个无穷的消息循环。直到退出消息时，程序才终止。而控制台程序是一个简单的直线型结构，运行到最后一段代码就停止。
在本次实验中，我主要复习了监听器和swing组件的知识，并体会到了人机交互对程序设计的重要性！
学 生 实 验 报 告
课程名称：
学生学号：
所属院部：
（理工类）
人机交互技术 专业班级： 12软件工程(Z)
1205107014 学生姓名： 陈爽
软件工程学院 指导教师： 陈圣国
20 14 ——20 15学年 第 2 学期
金陵科技学院教务处制
实验报告书写要求
实验报告原则上要求学生手写，要求书写工整。若因课程特点需打印的，要遵照以下字体、字号、间距等的具体要求。纸张一律采用A4的纸张。
实验报告书写说明
实验报告中一至四项内容为必填项，包括实验目的和要求；实验仪器和设备；实验内容与过程；实验结果与分析。各院部可根据学科特点和实验具体要求增加项目。
填写注意事项
（1）细致观察，及时、准确、如实记录。 （2）准确说明，层次清晰。
（3）尽量采用专用术语来说明事物。
（4）外文、符号、公式要准确，应使用统一规定的名词和符号。 （5）应独立完成实验报告的书写，严禁抄袭、复印，一经发现，以零分论处。
实验报告批改说明
实验报告的批改要及时、认真、仔细，一律用红色笔批改。实验报告的批改成绩采用百分制，具体评分标准由各院部自行制定。
实验报告装订要求
实验批改完毕后，任课老师将每门课程的每个实验项目的实验报告以自然班为单位、按学号升序排列，装订成册，并附上一份该门课程的实验大纲。
实验项目名称：图形用户界面设计 实验学时： 8 同组学生姓名： 全班同学 实验地点： A205 实验日期： 2015/03/26 实验成绩： 批改教师： 陈圣国 批改时间： 一、实验目的和要求
1、实验目的
1) 熟悉图形用户界面的设计原则
2)利用一种设计工具完成图形化的用户界面设计 2、实验要求
（1）记录系统分析及层次结构设计的过程，调试程序要记录调试过程中出现的问题及解决办法；
（2）编写程序要规范、正确，上机调试过程和结果要有记录，不断积累编程及调试经验；
（3）做完实验后给出本实验的实验报告。
二、实验仪器和设备
奔腾以上计算机，Windows XP 、Eclipse
三、实验过程
利用常用的设计工具完成一个简单的绘图软件，要遵循界面设计的一般原则，注意颜色的使用，用户能够利用鼠标绘制直线或圆、矩形等简单的图形，跟踪用户的鼠标移动，实现橡皮筋效果。
主要步骤： (1) 熟悉开发环境
在本次实验中，我主要用到的工具是Eclipse,但是要用Eclispe必须要有jdk的支持，我首先下载了1.7版本的jdk,然后进行安装并配置了classpath和path环境变量，最后下载到eclipse工具，我就可以进行开发了！ (2) 分析所要实现的功能
根据老师的要求，我要实现的功能有二： 1. 根据鼠标的移动绘制直线 2. 根据鼠标移动绘制圆
在我看来虽然是两个功能，但是实现原理都差不多，主要用到了swing组件和监听
器的知识，即在鼠标按下的时候触发监听器记录下鼠标点击位置的坐标，然后在鼠标拖动的过程中触发鼠标拖动监听器记录鼠标拖动到的位置，然后用背景色在原来的位置再绘制一遍图形，也就是覆盖原来的图形，接着在鼠标拖动到的位置处用区别于背景色的颜色再绘制图形，基本上原理就是这样！ (3) 编程实现
首先我写了一个继承JFrame的类Draw类，该类中初始化了窗口中的控件，还包含了一个内部类CDraw类，它继承了Canvas类，内部类中主要设置了监听器用于监听鼠标点击、拖动等事件，当事件被触发事将会记录位置或者绘制图形，具体代码如下：
import java.awt.BorderLayout; import java.awt.Button; import java.awt.Canvas; import java.awt.Color; import java.awt.Graphics; importimport java.awt.Point;
import java.awt.event.MouseEvent; import java.awt.event.MouseListener; import java.awt.event.MouseMotionListener; import javax.swing.ButtonGroup; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.JRadioButton;
public classextends JFrame {
private static JRadioButton RBDrawLine,RBDrawRound; private int isLine=1;//判断是画直线还是画圆 1代表画直线
public void initView(){
this.setBackground(Color.black); this.setTitle("画图工具");
this.setLayout(new BorderLayout()); JPanel panel=new JPanel();
RBDrawLine = new JRadioButton("直线",true); RBDrawRound = new JRadioButton("圆");
ButtonGroup bg = new ButtonGroup(); //按钮组 bg.add(RBDrawLine); //加入按钮组 bg.add(RBDrawRound); panel.add(RBDrawLine); panel.add(RBDrawRound);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setSize(600, 400); this.setVisible(true);
this.add(new Button(),BorderLayout.NORTH); this.add(panel,BorderLayout.NORTH); MDrawLine(); judgeRB();
this.setVisible(true);
}
public void judgeRB(){
if(RBDrawLine.isSelected()){
isLine=1;
}else{
isLine=0;
}
} public void MDrawLine() {
this.getContentPane().add(new CDraw()); }
class CDraw extends Canvas implements MouseListener,MouseMotionListener{
private static final long serialVersionUID = 1L; Point start,end,lastEnd; public CDraw(){ this.setBackground(Color.magenta); start=end=lastEnd=null; this.addMouseListener(this); this.addMouseMotionListener(this); } @Override
public void mouseReleased(MouseEvent e) { 事件 // TODO Auto-generated method stub end=new Point(e.getX(),e.getY());
repaint();
}
//鼠标释放
事件
@Override
public void mousePressed(MouseEvent e) { //鼠标按下 }
@Override
public void mouseExited(MouseEvent e) { }
@Override
public void mouseEntered(MouseEvent e) { }
@Override
public void mouseClicked(MouseEvent e) { }
@Override
public void mouseMoved(MouseEvent e) { }
@Override
public void mouseDragged(MouseEvent e) { }
// TODO Auto-generated method stub
lastEnd=end; //lastStart=start;
end=new Point(e.getX(),e.getY()); repaint();
// TODO Auto-generated method stub
// TODO Auto-generated method stub
// TODO Auto-generated method stub
// TODO Auto-generated method stub
// TODO Auto-generated method stub start=new Point(e.getX(),e.getY());
}
}
}
public void update(Graphics g){ }
paint(g); judgeRB(); if(isLine==1){ }
if(start!=null && lastEnd!=null){ }
if(start !=null && lastEnd!=null){ }
g.setColor(this.getBackground()); int LDX=Math.abs(lastEnd.x-start.x); int LDY=Math.abs(lastEnd.y-start.y); int r1=(int) Math.sqrt(LDX*LDX+LDY*LDY); g.drawOval(start.x, start.y, r1+r1, r1+r1); g.setColor(Color.blue);
int DX=Math.abs(end.x-start.x); int DY=Math.abs(end.y-start.y); int r2=(int) Math.sqrt(DX*DX+DY*DY); g.drawOval(start.x, start.y, r2+r2, r2+r2);
g.setColor(this.getBackground()); g.drawLine(start.x, start.y, lastEnd.x, g.setColor(Color.blue);
g.drawLine(start.x, start.y, end.x, end.y);
lastEnd.y);
}else{
做完了第一步，基本上就差不多了，接下来再写个测试类进行测试一下就OK啦！具体代码如下：
public class Test {
public static void main(String args[]){
Draw dr = new Draw();//新建对象 dr.initView();//执行初始化
}
四、实验结果与分析
1.我们运行程序可以看到如下界面，界面上部有两个按钮，我们可以通过来回切换按钮来确定是绘制直线还是圆
2、默然情况下直线的checkbox处于选中状态我们可以绘制直线了，还可以实现橡皮筋效果哦
3. 最后我们再来画个圆吧
五、讨论、思考
图形界面程序基于一个无穷的消息循环。直到退出消息时，程序才终止。而控制台程序是一个简单的直线型结构，运行到最后一段代码就停止。
在本次实验中，我主要复习了监听器和swing组件的知识，并体会到了人机交互对程序设计的重要性！