画图板的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","