画图板的实现

画图板的实现

项目截图：

    这是我学习Java做的第一个小软件，这是一个仿照Windows XP系统下的画图板自制的画板，功能比较简单，这个项目仅仅是我们学习如何使用java.swing、java.even、java.awt、java.io包下的组件，以及对于一个面板框架的布局。
    因此，这次给大家分享这个小项目非常简单，希望大家一看就能懂。
一、关键技术点
   a)窗体布局
    b)组件的添加（略，这个参考api文档中的java.swing下的组件就OK啦，很简单！）
    c)工具组件方法的实现——动态多态实现
    d)颜色组件方法的实现
    e)监听技术——鼠标监听器、动作监听器
    f)面板重绘——二维数组与队列存储的比较
    g)保存/打开
    h)BMP文件格式

二、关键技术点的实现
   a)窗体布局
    在这个项目中，我运用到了两种窗体布局BorderLayout边框布局和FlowLayout流式布局，下面就简单的介绍一下这两种布局。
BorderLayout边框布局

Up up = new Up(); //菜单栏面板
JMenuBar bar = up.setUp(); //菜单栏对象
		
		Left left = new Left();//工具栏面板容器
		
		Center center = new Center();//绘图区面板容器
		
	Down down = new Down();//颜料区面板容器

    首先我创建了这四个面板，这四个面板的创建方法我都把它们封闭在一个类里了，在这里只能看到这四行实现化对象的过程，但从这些对象名可以很容易区分出来，up是菜单栏的面板，它的大小面板中的内容都已经在这个面板类中初始化完成了，其它left/center/down，想必大家都明白。那么最终只需要组装这几个面板就行了。

this.setJMenuBar(bar);//添加菜单栏
		this.add(left.setLeft(), java.awt.BorderLayout.WEST);
		this.add(down.setDown(), java.awt.BorderLayout.SOUTH);
this.add(center.setCenter(), java.awt.BorderLayout.CENTER);

FlowLayout流式布局
    流式布局就是按行排列，一行放满了就换到下行去，这个布局是在各个面板容器中去实现的，通过上面的项目截图应该就很清楚的明白我是设置的从左对齐，当然也可以设置居中对齐、右对齐；例如：java.awt.FlowLayout f2 = new java.awt.FlowLayout(FlowLayout.LEFT); // 画板流式布局；其中FlowLayout.LEFT这个参数就是控制了对齐方式，我们可以改成居中对齐FlowLayout.CENTER右对齐FlowLayout.RIGHT.

b)组件的添加（略）

c)工具组件方法的实现——动态多态实现
    通过Windows XP的画板我们就可以知道，左面板上有许多的工具，有的是选择工具，有的是画图工具，有的是辅助设计工具，其实要实现这些工具都不难，下面我们透过几个简介的画图工具来试试。下面要介绍的这个技术点是在Java面向对象设计语言中，非常具有代表的一项特性，java语言的主要特性有三：封装、继承、多态；
那么简单的描述一下什么是多态：一个事物可呈现出多种形态。那么具体接口的多种不同的实现方式即为多态。下面我们具体到实例中来看吧。

package MyPaint;

import java.awt.Color;
import java.awt.Graphics;
/**
 * 绘图的方法体组合
 */

public abstract class Shapenes {
	public int x1,y1,x2,y2,type;
	public Color color;
	public Shapenes(int x1, int y1, int x2, int y2,int type,Color color) {
		super();
		this.x1 = x1;
		this.y1 = y1;
		this.x2 = x2;
		this.y2 = y2;
		this.type = type;
		this.color = color;
	}
	public abstract void draw(Graphics peaper);
}

    这是一个抽象类，其实刚才讲的接口，也就是一个纯抽象类，但抽象类是介于抽象类与普通类之间的数据结构。这里我们可以看到这个抽象类中，有变量的声明，构造方法，还有一个很重要的元素，就是这个抽象方法abstract，何为抽象方法，就是没有实现的方法，在没有定义之前它不是真正存在的；只有当其它类继承了这个抽象类，实现了抽象类中的draw这个抽象方法，这个方法才是真正存在。所有下面我们可以再来构造其它的画图工具来继承这个抽象类，那可能讲了这么多，大家还是不明白我为什么要这样做；其实后面很简单，我就是要用一个对象名去调用不同对象的方法，请看实例：

/**
		 * 创建绘图工具
		 */
		//图形的对象的存储，实现了一个对象可以接受各种不同的
		Shapenes shape = new Drawline(x1,y1,x2,y2,0,color);
		if (Button_name.equals("Line")){
			shape = new Drawline(x1,y1,x2,y2,0,color);
		}
		else if (Button_name.equals("Rect"))
			{shape = new DrawRect(x1,y1,x2,y2,1,color);}
		else if (Button_name.equals("Oval"))
			{shape = new DrawOval(x1,y1,x2,y2,2,color);}
		else if (Button_name.equals("fillOval"))
			{shape = new DrawFOval(x1,y1,x2,y2,3,color);}
		else if (Button_name.equals("fill3DRect"))
			{shape = new Draw3DRect(x1,y1,x2,y2,4,color);}	
		else if (Button_name.equals("save"))
		{System.out.println("save");}	
		else if (Button_name.equals("open"))
		{System.out.println("open");}	

			shape.draw(peaper);
			list.add(shape);
	}

    从代码中可以看出，shape可以根据判断的不同，赋予的对象也不同，而最后我都只管调用这一个方法shape.draw(peaper);最终可以画出我想要的各种图形。因此这里就是实现了动态多态技术。如果还不清晰，我向大家举一个例子：抽象类在这里发挥出了巨大的优势，这个类就好像一个铅笔盒，可以放入各种学习用品，铅笔、钢笔、橡皮擦、尺子……当铅笔盒盖上的时候它是一个整体，但取出来的时候又可以变成许多的个体，有效的节约了物理空间；那么在程序中就相当于简化了程序。
d)颜色组件方法的实现
    自认为本项目的颜料盒做得最差，但这确实是时间的原因，在这里只是意思一下了，而如果真正仿照Windows XP中的画板，这里的颜料盒应该使用GridLayout网格布局，每一格是一种颜色，这样成和Windows XP中的画板是一模一样的；在这里只能简单的介绍一下，后面再接着去完善。
e)监听技术——鼠标监听器、动作监听器
    鼠标监听器：鼠标监听器是用于监听鼠标在中间画布的操作，我们可看看MouseDragGestureRecognizer鼠标监听器中的方法，以下是其中的一部分方法：
public void mouseClicked(MouseEvent e) { }
public void mousePressed(MouseEvent e) { }
public void mouseReleased(MouseEvent e) { }
public void mouseEntered(MouseEvent e) { }
public void mouseExited(MouseEvent e) { }
public void mouseDragged(MouseEvent e) { }
public void mouseMoved(MouseEvent e) { }
    这几个方法的功能从这些方法名称就可以明白，因此这里不多解释了，在这些方法中我们可以进行相应的操作，来达到我们想到的操作，例如：MouseEvent e可以获取鼠标的坐标，这样就可确定图形绘制的位置，不同的图形可能需要的坐标点的数量不同，但没关系是可以解决的。
动作监听器
    是用来监听工具面板和颜料面板上的按钮动作，当选中某个按钮时在监听器中自动触发相应的动作，当然前提是这些面板上的对象都是在这个监听器的范围之内；所以我们还需要注意无论是鼠标监听器、动作监听器，它只是一个附加功能，最终都需要被对象附加上去。
下面请看一下动作监听器ActionListener接口中的方法：
public void actionPerformed(ActionEvent e);
    这个接口中只含有一个方法，并且这个方法还没有实现，那么我们使用这个功能时就必需要先实现这个方法，这个方法如何实现，就和鼠标监听器的方法差不多，那我们要看一下，哪些功能器件要使用到动作监听器，刚才例出了工具面板中的对象，颜料面板中的对象，其实还有一个是菜单栏中的菜单选项。具体实例不看了。

f)面板重绘——二维数组与队列存储的比较
    面板重绘是指将缓存中的数据保存到内存中去，如果没有重绘操作你会发现，当你在绘图区绘图之后，只要窗体发现改变，刚刚绘制的图形就消失了，这就是因为刚刚绘制的图形在缓存中，还没有被保存到内存中去，那么重绘就是要来解决这个问题，首先要把画布上的内容使用数据容器，保存到内存中去，当窗体发生变化时，面板重新从内存中调取保存的内容绘制在面板上，这样就达到了面板恢复的效果，但是绘画区的内容暂时保存到内存中去也不能保证万无一失，内存中的内容也不是永久性的，如果计算机发现断电时，内存中的数据会消失，这样依然无法保证我们的成果。这就需要通过文件存取的方式保存到外存中，那样我们就可以永存数据不至于丢失。文件操作在下一节中讲，这里我们暂时来实现，将缓存中的数据保存到内存中去。
    刚讲了把画布上的内容使用数据容器，保存到内存中去，那么这个关键技术点就在于这个数据容器上了，如果一个数据容器设计得巧合，那么对于项目操作肯定是有益的。那么想想在Java中数据容器有很多：Set 、List 、Map ……，那哪些是更适合的呢?这里我将针对两种数据容器来使用比较两者的优劣性。
第一：队列
     想必大家对队列已经很熟悉了，那么我直接分享队列在保存中的使用，其实在这里队列还涉及到一个很重要的知道点，那就是泛型，如果有不清楚的可以自己去查阅资料；首先我们设想一下，我们可以将每次画上去的图形为一个对象，保存到队列中去，这个对象可能涉及到坐标、颜色、以及是个什么图形。
好，根据提出的这些设想，那么我们就开始实现了，请看实例：

package MyPaint;
import java.awt.Color;
import java.awt.Graphics;
/**
 * 绘图的方法体组合
 */

public abstract class Shapenes {
	public int x1,y1,x2,y2,type;
	public Color color;
	public Shapenes(int x1, int y1, int x2, int y2,int type,Color color) {
		super();
		this.x1 = x1;
		this.y1 = y1;
		this.x2 = x2;
		this.y2 = y2;
		this.type = type;
		this.color = color;
	}
	public abstract void draw(Graphics peaper);
}

    这是我们在之前在实现工具的动态多态中所使用的abstract抽象方法，在这里我们又可能用到它了，我们将它作为每个图形的对象，保存到队列中去，从这个类中可以看出来，它保存了对象的两个坐标点、颜色、图形的类型；就是这三个关键元素构成了我们想到的图形，我们既然可以通过这三个元素画出相应的图形，我们保存这三个元素当然能够还原相应的图形。确定这一点后，我们可以继续往下走：

//图形的对象的存储，实现了一个对象可以接受各种不同的
		Shapenes shape = new Drawline(x1,y1,x2,y2,0,color);
		if (Button_name.equals("Line")){
			shape = new Drawline(x1,y1,x2,y2,0,color);
		}
		else if (Button_name.equals("Rect"))
			{shape = new DrawRect(x1,y1,x2,y2,1,color);}
		else if (Button_name.equals("Oval"))
			{shape = new DrawOval(x1,y1,x2,y2,2,color);}
		else if (Button_name.equals("fillOval"))
			{shape = new DrawFOval(x1,y1,x2,y2,3,color);}
		else if (Button_name.equals("fill3DRect"))
			{shape = new Draw3DRect(x1,y1,x2,y2,4,color);}	
		else if (Button_name.equals("save"))
		{System.out.println("save");}	
		else if (Button_name.equals("open"))
		{System.out.println("open");}	
			shape.draw(peaper);
			list.add(shape);
	}

    这个方法在是鼠标监听器public void mouseReleased(MouseEvent e)中实现的，在这里我们又可以看到动态多态的优势了，我们绘制不同的图形，最终我们不仅仅是用这一个对象还调用绘画方法，而且用需要保存这一个对象就可以完成对所有不同图形的保存。这个设计模式是太完美了。保存完图形之后，我们还没有完成重点操作，就是实现面板的重绘，要将这些保存的数据与重绘方法结合起来，让这个数据可以随着重绘操作实现更新面板。
这个重绘操作是在中间面板中来完成的，我们要把保存在队列中的数据传到这个面板类中来，在JPanel中有一个重绘方法，我们需要重写这个方法，请看实例：

class MyJPanel extends JPanel {
	public void paint(Graphics g){
	super.paint(g);
	ListSave<Shapenes> list = mouselisterner.list;///调用子类的变量，需要将mouselisterner定义成子类才行
	for(int i=0;i<list.size();i++){
	Shapenes shape = (Shapenes) list.get(i); ///新定义一个变量来接收队列中的元素
	shape.draw(g);
		}
		}
	}

    这里我们定义了一个MyJPanel内部类，那这个类继承了javax.swing.JPanel这个类，重写了public void paint(Graphics g)这个方法，这个方法正式我们要用到的重绘方法，先要调用super.paint(g);父类中的绘图方法，把之前的内容也绘制出来，不然之后绘制的图形会刷新面板使得图形无法显示。在调用完父类中的绘图方法之后，再把队列中的数据绘制上去，这样就实现了重绘操作，之后无论你是“最小化”、“移动窗体”操作都不会对面板中的图形有影响。
第二：二维数组
    看完二维数组的保存方法之后，你也许会惊讶二维数组的方便。可以分析一下，我们每幅图画都可以看成是一个矩形，那么矩形岂不是有长和宽，那么在这个矩形区域由许多的像素点组成，而在计算机中每个像素点是可以用一个Int数据类型来表示，这样我们利用图片的分辨率还定义数组，数组内的元素都是存在了像素点的颜色Int值。请看代码实例：

/**
		 * 将图像存入数组中
		 */
		// 创建机器人来截取图像
		try {
			// 创建机器人对象
			Robot robot = new Robot();
			// 获取画布对象
			JPanel center_peaper = (JPanel) e.getSource();
			// 获取画布的位置
			Point point = center_peaper.getLocationOnScreen();
			// 获取画面的高度宽度
			Dimension dimension = center_peaper.getPreferredSize();
			// 设置截图的位置、高、宽
			Rectangle screenRect = new Rectangle(point, dimension);
			// 初始化二维数组
			saveImage = new int[dimension.height][dimension.width];
			imageR = new int[dimension.height][dimension.width];
			imageG = new int[dimension.height][dimension.width];
			imageB = new int[dimension.height][dimension.width];
			// 机器人开始截图
			BufferedImage bufferedImage = robot.createScreenCapture(screenRect);
			// 将图像数据存入二维数组中
			for (int i = dimension.height - 1; i >= 0; i--)
				for (int j = 0; j < dimension.width; j++) { // 自定义文件格式保存
					int image = bufferedImage.getRGB(j, i);
					saveImage[i][j] = image;
					filetype = 1;
}
}

    思路很清晰了，通过代码实例来看，我们所做的无非就是把画板上的图像截取下来，按照图像的分辨率实例化了一个二维数组，用这个数组来保存截图每个点上的颜色值；但这里还是有几个重要的技术点，一个是Robot机器人类的使用，这个不难可以参考API文档，另外一个就是这个图像数据存入二维数组时，要注意图像的长度与二维数组的下标相对应，如果对应错了图像是会发现错误的。通过二维数组保存之外就可以传入重绘方法中去，让重绘方法调用数组中的数据进行重绘。操作就是这么简单，具体Robot的操作在上面的代码中都体现出来了，希望大家一看就懂！通过使用这两种数据容器来保存数据，想必大家会有青睐的一种，无论哪一种，我觉得都有它的优劣性，具体也不分析了，总之学会一种方式就很好了！
g)保存/打开
    刚刚我们实现了重绘，那么这个环节我们把内存中的数据再写到外存中去，进行永久的保存，我们依然可以选择其中一种数据容器来进行保存，那么我们要怎么要写入文件呢？拿这个队列为例：

public void actionPerformed(ActionEvent e) {
		String command = e.getActionCommand();
		/**
		 * 文件保存操作
		 */
		if (command.equals("save")) {
			// 文件保存对象
			FileSave filesave = new FileSave();
			try {
				/**
				 * 将队列保存到文件中去
				 */
				filesave.output(lis.list);
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}

		/**
		 * 文件打开操作
		 */
		else if (command.equals("open")) {
			// 文件打开对象
			FileOpen fileopen = new FileOpen();
			try {
				/**
				 * 将文件从文件中读到列队中来
				 */
				lis.list = fileopen.input();
				center_peaper.updateUI();
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
	}

    这个方法是在动作监听器中实现的，我们要在单击了“保存”或“打开”这个选项时，我们才会触发相应的动作，这个时候如果单击了“保存”，那么我们首先要创建一个文件，文件名由用户自定义，如果文件创建成功则调用这个文件保存output方法：

public void output(ListSave<Shapenes> list) throws Exception{
		//文件输出流
		FileOutputStream outputfile = new FileOutputStream("g:\\ss\\savepaint.txt");
		//原始数据输出流
		DataOutputStream outstream = new DataOutputStream(outputfile);
		
		//写入图形对象的个数，即文件头
		outstream.write(list.size());
		for(int i=0;i<list.size();i++){
			Shapenes shape =  list.get(i);
			outstream.writeInt(shape.x1);
			outstream.writeInt(shape.y1);
			outstream.writeInt(shape.x2);
			outstream.writeInt(shape.y2);
			outstream.writeInt(shape.type);
			outstream.writeInt(shape.color.getRGB());
		}
		//强制输出
		outstream.flush();
		//关闭文件输出流
		outputfile.close();
	}

    通过这个过程，我们就可以把我们绘制的作品写入到文件中去了，那么打开操作就是保存互逆的一个过程；如果保存实现了，打开就没必要再多分享了。写入文件后要记得flush一下，close一下。
h)BMP文件格式
    其实在这个项目中，还实现了BMP文件格式的解析，在项目截图就可看到绘图板上的那幅图像是BMP的一张图片，BMP是Windows中自带的一种图像文件格式，这种文件格式在网上已经被公开，只要知道这种文件的格式就很好读取出来，显示在我们自制的绘画板上，同样我们也可将我们绘制的图像保存成为BMP格式，这样我们的作品就要以与Windows直接交互使用。
BMP的文件格式在这里不去分析了，只是将我所写的代码分享如下！

public class ButtonListen implements ActionListener {
	private int[][] saveImage;
	public static int[][] imageR;
	public static int[][] imageG;
	public static int[][] imageB;
	public static int image_width;
	public static int image_heigh;

	public void actionPerformed(ActionEvent e) {
	

		/**
		 * 画板内容的保存
		 */
		if (e.getActionCommand().equals("save")) {
			// 创建保存对话框
			JFileChooser filechooser = new JFileChooser();
			int num = filechooser.showSaveDialog(null);
			if (num == 0) {
				String path = filechooser.getSelectedFile().getAbsolutePath();
				ButtonListen file = new ButtonListen();
				try {
					file.savefile(path);
				} catch (Exception e1) {
					// TODO Auto-generated catch block
					e1.printStackTrace();
				}
			}

		} else if (e.getActionCommand().equals("open")) {
			// 创建打开对话框
			JFileChooser filechooser = new JFileChooser();
			int num = filechooser.showOpenDialog(null);
			if (num == 0) {
				String path = filechooser.getSelectedFile().getAbsolutePath();
				ButtonListen file = new ButtonListen();
				try {
					file.openfile(path);
				} catch (Exception e1) {
					// TODO Auto-generated catch block
					e1.printStackTrace();
				}
			}
			
		}

	}

	private void openfile(String path) throws Exception{
		// TODO Auto-generated method stub
		//获取文件名
		File filename =new File(path);
		String name = filename.getName().toLowerCase();
		String key = ".bmp";
		// 创建文件输入流
		FileInputStream infile = new FileInputStream(path);
		// 创建原始数据输入流
		DataInputStream instream = new DataInputStream(infile);
		if(name.indexOf(key)!=-1){///用BMP格式打开
		//读入BMP文件头，读取14个字节
		int fileheadsize = 14;
		byte filehead [] = new byte[fileheadsize];
		instream.read(filehead, 0, fileheadsize);
		//读入位图信息头,读取40个字节
		int filenewssize = 40;
		byte filenews [] = new byte[filenewssize];
		instream.read(filenews, 0, filenewssize);
		//从位图信息头中获取重要数据
		image_width = ChangeInt(filenews,7);
		image_heigh = ChangeInt(filenews,11);
		int image_bit = (((int)filenews[15]&0xff)<<8)|(int)filenews[14]&0xff; //图像的色深位数
		int image_size =ChangeInt(filenews,23);//源图的大小	
		
		//读取位图中图像的数据
		int skip_width = 0;
		if(!(image_width*3%4==0)){
			 skip_width = 4-image_width*3%4;
		}///后面补0的情况处理
		//装载RGB颜色的数据数组
		imageR = new int [image_heigh][image_width];
		imageG = new int [image_heigh][image_width];
		imageB = new int [image_heigh][image_width];
		//按行读取，H,W倒着读
		for(int h=image_heigh-1;h>=0;h--)
			for(int w=0;w<image_width;w++)
			{
				int blue = instream.read();
				int green = instream.read();
				int red = instream.read();

				imageB[h][w] = blue;
				imageG[h][w] = green;
				imageR[h][w] = red;
				if(w == 0){
					System.out.println(instream.skipBytes(skip_width));
				}
			}
		infile.close();
		
		
		}else {////用自定义格式打开

		int h = instream.readInt();
		int w = instream.readInt();
	
		saveImage = new int[h][w];
		for (int i = 0; i <h; i++)
			for (int j = 0; j <w; j++) {
				saveImage[i][j] = instream.readInt();
				
			}
		infile.close();
		//将读取到的数据传入重绘数组
		Mouse_Lis.saveImage = saveImage;}
	}

三、关键技术点的总结
    这个项目的主要技术点已经分享完了，最后还做一个小小的总结，这个项目如果有时间我会继续改进；通过这次项目的演练，我对于Swing、Awt下的组件的使用都有了成熟的经验，组件更换显示图标，组件的分布，组件的监听都有了比较感性的认识，尤其是对于对象与类的区别，封装、继承、多态等等这些基础的知识点。但同时也知道对于一个桌面应用程序来说，要做好做完善是需要不断的维护和更新的，这也要求我们自己要不断的进步和学习，这样才能开发出更优秀的软件。