画图板的java实现.docx
《画图板的java实现.docx》由会员分享，可在线阅读，更多相关《画图板的java实现.docx（73页珍藏版）》请在冰点文库上搜索。
画图板的java实现
仿真Windows_XP画图板的java实现
（一）
一、项目开发与相关的技术点掌握：
Question1：
高仿Windows_XP画图板需要一些什么技术点？
需要的技术点包括：
窗体的创建、菜单栏创建、数组的使用、颜色选择器的创建、鼠标动作监听器的创建与添加、绘制图形相应的方法的实现、重绘的实现，文件输出流与输入流的结合实现图画的存储读取、基本存储格式的运用（伪BMP图片格式的使用）。
Question2：
高仿Windows_XP画图板的开发需要通过的步骤？
一个简单的高仿Windows_XP画图板其实通过一下的几步便可实现。
①、创建窗体、创建画布（画图区域）、创建菜单栏、创建工具栏、创建颜色选择栏；
②、创建鼠标监听器对象并添加到画图区域（画布）上，实现相应坐标点数据的传入；
③、调用相应的方法，根据传入的坐标数据，在画图区域（画布）上实现相应图形的绘制；
④、根据“缓存—内存”的关系，定义“重绘”的方法，在窗体最小化（缓存释放）之后再次打开窗体依旧能看到所画图形的实现；
⑤、文件输出流和文件输入流的创建，及相应的包装，实现最后的保存与读取；
⑥、保存文件格式的自定义，伪BMP图片格式的自定义读取存储；
⑦、网络图片资源的获取，使图形按钮更相似。
二、项目开发过程与技术点掌握过程：
Part1：
窗体（JFrame）、容器（JPanel）、按钮（JButton）与布局；
该部分的掌握，最初源于对于Windows_XP计算器的模仿：
窗体（JFrame），即一个基本的外围界面，可理解为最大的外围容器，可将JPanel之类的小型容器放于其上，一个最简单的窗体包括：
窗体开头（窗体名）、默认使用的边框（表现为设置好的大小格式）、窗体右上角自带“最小化”、“最大化”、“关闭窗体”三个按钮、以及其余属性。
如图所示：
其实现的代码如下：
Java代码
1.importjavax.swing.JFrame;
2./**
3.*定义窗体示范类，该类继承自JFrame
4.*
5.*@author吴少聪
6.*/
7.publicclassCalcolatorextendsJFrame{
8./**
9.*主函数部分
10.*/
11.publicstaticvoidmain（String[]args）{
12.//实例化一个对象：
cal，并且用该对象调用init方法
13.Calcolatorcal=newCalcolator（）;
14.cal.init（）;
15.}
16./**
17.*定义初始化窗体界面的方法：
init
18.*/
19.publicvoidinit（）{
20.//设置窗体的属性
21.this.setTitle（"这是一个窗体，可以随意设置窗体名"）;//窗体名的设定
22.this.setSize（320,250）;//窗体大小的设定，其大小单位为像素点数量，可理解为分辨率为320x250
23.this.setDefaultCloseOperation（3）;//设置窗体关闭时退出程序
24.this.setLocationRelativeTo（null）;//设置窗体创建之后在屏幕上居中显示
25.this.setResizable（false）;//设置窗体大小固定，无法实现最大化
26.this.setVisible（true）;//设置窗体对外可见（可显示出来）
27.}
28.}
importjavax.swing.JFrame;
/**
*定义窗体示范类，该类继承自JFrame
*
*@author吴少聪
*/
publicclassCalcolatorextendsJFrame{
/**
*主函数部分
*/
publicstaticvoidmain（String[]args）{
//实例化一个对象：
cal，并且用该对象调用init方法
Calcolatorcal=newCalcolator（）;
cal.init（）;
}
/**
*定义初始化窗体界面的方法：
init
*/
publicvoidinit（）{
//设置窗体的属性
this.setTitle（"这是一个窗体，可以随意设置窗体名"）;//窗体名的设定
this.setSize（320,250）;//窗体大小的设定，其大小单位为像素点数量，可理解为分辨率为320x250
this.setDefaultCloseOperation（3）;//设置窗体关闭时退出程序
this.setLocationRelativeTo（null）;//设置窗体创建之后在屏幕上居中显示
this.setResizable（false）;//设置窗体大小固定，无法实现最大化
this.setVisible（true）;//设置窗体对外可见（可显示出来）
}
}
……………………………………分割线……………………………………………………
窗体的创建这就像是搭建了一个大体的框架，如一个衣柜或是一个壁橱钉好了最外围的框架，现在我们要往上添加放置具体器物的格子，即放置最基本的JPanel小容器。
如图所示：
窗体要变成这样，我们需要做出如下的源码添加：
Java代码
1.importjava.awt.Color;
2.importjava.awt.Dimension;
3.importjavax.swing.JFrame;
4.importjavax.swing.JPanel;
5.
6./**
7.*定义窗体示范类，该类继承自JFrame
8.*
9.*@author吴少聪
10.*/
11.publicclassCalcolatorextendsJFrame{
12./**
13.*主函数部分
14.*/
15.publicstaticvoidmain（String[]args）{
16.//实例化对象cal，并且用该对象调用init方法
17.Calcolatorcal=newCalcolator（）;
18.cal.init（）;
19.}
20.
21./**
22.*定义初始化窗体界面的方法：
init
23.*/
24.publicvoidinit（）{
25.//设置窗体的属性
26.this.setTitle（"这是一个窗体，可以随意设置窗体名"）;//窗体名的设定
27.this.setSize（420,250）;//窗体大小的设定，其大小单位为像素点数量，可理解为分辨率为420x250
28.this.setLocationRelativeTo（null）;//设置窗体创建之后在屏幕上居中显示
29.this.setResizable（false）;//设置窗体大小固定，无法实现最大化
30.
31.//<<<<<<<<<<<<<>>>>>>>>>>>>>>>//
32.JPanelpanel=newJPanel（）;//创建（实例化）一个JPanel面板对象：
panel
33.panel.setPreferredSize（newDimension（65,65））;//同样的，面板自己也有大小，设置面板的大小
34.panel.setBackground（Color.blue）;//设置面板自身的背景颜色：
蓝色（可自定义）
35.
36.this.add（panel）;//将创建并定义好的面板放置在窗体上
37.this.setDefaultCloseOperation（3）;//设置窗体关闭时退出程序
38.this.setVisible（true）;//设置窗体对外可见（可显示出来）
39.}
40.}
importjava.awt.Color;
importjava.awt.Dimension;
importjavax.swing.JFrame;
importjavax.swing.JPanel;
/**
*定义窗体示范类，该类继承自JFrame
*
*@author吴少聪
*/
publicclassCalcolatorextendsJFrame{
/**
*主函数部分
*/
publicstaticvoidmain（String[]args）{
//实例化对象cal，并且用该对象调用init方法
Calcolatorcal=newCalcolator（）;
cal.init（）;
}
/**
*定义初始化窗体界面的方法：
init
*/
publicvoidinit（）{
//设置窗体的属性
this.setTitle（"这是一个窗体，可以随意设置窗体名"）;//窗体名的设定
this.setSize（420,250）;//窗体大小的设定，其大小单位为像素点数量，可理解为分辨率为420x250
this.setLocationRelativeTo（null）;//设置窗体创建之后在屏幕上居中显示
this.setResizable（false）;//设置窗体大小固定，无法实现最大化
//<<<<<<<<<<<<<>>>>>>>>>>>>>>>//
JPanelpanel=newJPanel（）;//创建（实例化）一个JPanel面板对象：
panel
panel.setPreferredSize（newDimension（65,65））;//同样的，面板自己也有大小，设置面板的大小
panel.setBackground（Color.blue）;//设置面板自身的背景颜色：
蓝色（可自定义）
this.add（panel）;//将创建并定义好的面板放置在窗体上
this.setDefaultCloseOperation（3）;//设置窗体关闭时退出程序
this.setVisible（true）;//设置窗体对外可见（可显示出来）
}
}
……………………………………分割线……………………………………………………
很显然，出错了……错误在哪？
我们往窗体上放置面板，窗体的大小（计算边框）为420*250分辨率，而在我们自己的设置当中，面板的大小仅为65*65分辨率，按理来说面板与窗体大小相差甚远，但是从运行情况上来看，窗体明显被蓝色背景颜色的面板占满，违背了我们设置大小差异的初衷。
那么，问题在哪？
答案很简单：
布局！
所谓布局，通俗来讲便是放置具体器物的空间规划，而窗体本身默认一个布局：
边框布局BorderLayout，由于我们未加定义具体的参数，所以布局将面板拉伸扩充至将窗体界面占满为止。
BorderLayout.布局的形式如下：
--EndFragment-->
因此我们只需要把源码中的部分语句增添说明便可：
this.add（panel）;//将创建并定义好的面板放置在窗体上
改为：
this.add（panel,BorderLayout.SOUTH）;//将创建并定义好的面板放置在窗体上
便可实现：
--EndFragment-->
或是：
虽然能够做到对布局做一个大体的改变，但是仍然发现无论是什么样的方位安排，JPanel面板都会填充这一方位，我们定义分辨率的两个数据中也只有一个能起到作用，这也必然达不到我们预期的希望：
按照我们的计划自由安排JPanel面板在窗体上的摆放，且大小完全由我们自定义，而不是方位上的拉伸扩充。
于是我们可以采取使用别的布局方法：
Java语言三大布局管理方法：
FlowLayout（流式布局）、BorderLayout（边框布局）、GridLayout（网格布局管理器）
这里采用FlowLayout（流式布局）进行改造示范：
添加如下源码语句：
--EndFragment-->
Java代码
1.this.setLayout（newFlowLayout（FlowLayout.CENTER））;//定义窗体为流式布局，并将JPanel面板放于正中间
this.setLayout（newFlowLayout（FlowLayout.CENTER））;//定义窗体为流式布局，并将JPanel面板放于正中间
并将之前做的布局更改取消，得到如下效果：
--EndFragment-->
现在达到了一个比较令人满意的效果，JPanel面板的方位和大小都能够按照安排摆放了，但是要实现一开始的仿Windows_XP计算器面板效果，还有两部分未完成：
文本框与按钮。
由于文本框并不是高仿Windows_XP画图板开发所需的技术点，这里简要叙述，且该计算器只是单纯的面板画面模仿，并未实现任何计算和输入功能。
文本框（JTextField）的代码实现如下：
--EndFragment-->
Java代码
1.//<<<<<<<<<<<<<<<>>>>>>>>>>>>//
2.JTextFieldtxt=newJTextField（27）;//创建（实例化）一个文本框对象txt
3.txt.setText（"这是一个文本框"）;//设置文本框显示的字符串
4.txt.setHorizontalAlignment（JTextField.LEFT）;//设置显示文本框从左边开始显示字符串
5.txt.setEditable（false）;
6.
7.panel.setLayout（newFlowLayout（FlowLayout.CENTER））;//面板本身也可以设置布局
8.panel.add（txt）;//将文本框添加到JPanel面板上
//<<<<<<<<<<<<<<<>>>>>>>>>>>>//
JTextFieldtxt=newJTextField（27）;//创建（实例化）一个文本框对象txt
txt.setText（"这是一个文本框"）;//设置文本框显示的字符串
txt.setHorizontalAlignment（JTextField.LEFT）;//设置显示文本框从左边开始显示字符串
txt.setEditable（false）;
panel.setLayout（newFlowLayout（FlowLayout.CENTER））;//面板本身也可以设置布局
panel.add（txt）;//将文本框添加到JPanel面板上
由于需要效果明显一些，所以在添加时，取消了窗体的流式布局，实现效果如下：
--EndFragment-->
…………………………………………分割线………………………………………………
文本框的简单实现如上，还有绝大部分的功能未有实现，有待后期学习的发掘，现在进入重要性较高的一个部分：
按钮（JButton）的创建和添加。
按钮创建与添加的源码实现如下：
--EndFragment-->
Java代码
1.//<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>//
2.StringbuttonName=newString（"这是一个按钮"）;//定义一个字符串常量
3.JButtonjbn=newJButton（buttonName）;//创建（实例化）一个按钮对象：
jbn
4.jbn.setFont（newFont（"ArialNarrow",Font.BOLD,18））;
5.panel.add（jbn）;//添加此按钮到面板上
6.
//<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>//
StringbuttonName=newString（"这是一个按钮"）;//定义一个字符串常量
JButtonjbn=newJButton（buttonName）;//创建（实例化）一个按钮对象：
jbn
jbn.setFont（newFont（"ArialNarrow",Font.BOLD,18））;
panel.add（jbn）;//添加此按钮到面板上
实现过后的效果如下：
（可看见按钮上自动设置了“焦点”）
…………………………………………分割线………………………………………………
到了现在，基本的技术点已经演示完一遍，在实例中，多个按钮的创建可以通过循环数组，且可以采取整体的网格布局，但由于高仿Windows_XP画图板的开发重点并不仅仅是一个画面风格的构建，所以在这里不做仿Windows_XP计算器界面逐步完善过程的进一步阐述，现将完善后的全部源码分享如下，大家可以多多批评指正：
--EndFragment-->
Java代码
1.importjava.awt.BorderLayout;
2.importjava.awt.Color;
3.importjava.awt.Dimension;
4.importjava.awt.FlowLayout;
5.importjava.awt.Font;
6.importjava.awt.GridLayout;
7.
8.importjavax.swing.JButton;
9.importjavax.swing.JFrame;
10.importjavax.swing.JPanel;
11.importjavax.swing.JTextField;
12.
13./**
14.*定义计算器类，该类继承自JFrame
15.*
16.*@author吴少聪
17.*/
18.publicclassCalcolatorextendsJFrame{
19./**
20.*主函数部分
21.*/
22.publicstaticvoidmain（String[]args）{
23.//实例化对象cal，并且用该对象调用init方法
24.Calcolatorcal=newCalcolator（）;
25.cal.init（）;
26.}
27.
28./**
29.*定义初始化窗体界面的方法：
init
30.*/
31.publicvoidinit（）{
32.//设置窗体的属性
33.this.setTitle（"仿Windows_XP计算器界面"）;//窗体名的设定
34.this.setSize（420,250）;//窗体大小的设定，其大小单位为像素点数量，可理解为分辨率为420x250
35.this.setLocationRelativeTo（null）;//设置窗体创建之后在屏幕上居中显示
36.this.setResizable（false）;//设置窗体大小固定，无法实现最大化
37.
38.//<<<<<<<<<<<<<>>>>>>>>>>>>>>>//
39.JPanelpanel01=newJPanel（）;//创建（实例化）一个JPanel面板对象：
panel01
40.panel01.setPreferredSize（newDimension（350,65））;//同样的，面板自己也有大小，设置面板的大小
41.panel01.setBackground（Color.white）;//设置面板自身的背景颜色：
白色（可自定义）
42.
43.
44.JPanelpanel02=newJPanel（）;//创建（实例化）第二个JPanel面板对象：
panel02
45.panel02.setLayout（newGridLayout（4,6,5,5））;//面板对象：
panel02采用网格布局法
46.this.add（panel01,BorderLayout.NORTH）;//将创建并定义好的面板放置在窗体上
47.this.add（panel02,BorderLayout.CENTER）;
48.
49.
50.//<<<<<<<<<<<<<<<>>>>>>>>>>>>//
51.JTextFieldtxt=newJTextField（27）;//创建（实例化）一个文本框对象txt
52.txt.setText（"0."）;//设置文本框显示的字符串
53.txt.setHorizontalAlignment（JTextField.RIGHT）;//设置显示文本框从右边开始显示字符串
54.txt.setEditable（false）;
55.
56.panel01.setLayout（newFlowLayout（FlowLayout.RIGHT））;//面板本身也可以设置布局
57.panel01.add（txt）;//将文本框添加到JPanel01面板上
58.
59.//<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>//
60.JButtonbtn1=newJButton（"Backspace"）;//实例化一个按钮对象btn1，按钮上显示Backspace
61.JButtonbtn2=newJButton（"CE"）;//同上
62.JButtonbtn3=newJButton（"C"）;//同上
63.panel01.add（btn1）;//将按钮添加到面板panel01上
64.panel01.add（btn2）;
65.panel01.add（btn3）;
66.
67.//定义一个array数组，指定数组的每一个元素值（即计算器按钮上符号的集群）
68.Stringarray[]={"MC","7","8","9","/","sqrt","MR","4","5",
69."6","*","%","MS","1","
升级会员 