画图板初步
画图板初步
从只是一个窗口，到画图板各种组件一步一步的齐全。先说一下我最大的收获，也是以后要注意的。
一：设定参数变量的时候，变量名一定要起好，要有规律...不然的话自己都很难找。
二：传值的时候一定要小心，（例如在界面和监听器中传值），漏传，传错等，皆是空值。
心得总结：
通过这次的画图板，让我初步体会到了 做一个大的程序的一些经验。
以前学的只是一个个小的程序，变量不多，但是真正的大程序，数据繁琐，必须要做到每一步的清晰（尤其是我错了n次的传值）。
其次，一定要把同一部分的内容放在一起，不然会使程序显得十分凌乱不堪，一旦出错，会花上更多的精力去寻找。
最后，是关于空指针和空值的处理。
最有用的方法，无非就是一行一行的打印，当然，当我们遇到没用过不理解的方法的时候，也是要用到打印的方法去理解。
我所遇到的空值，主要是两种错误：
1：传值的时候出错。
2：声明了多次，无法识别。
下面，开始就自己的体会，详细分析画图板。
我的画图板，是就windows自带的画图板进行模仿。windows自带画图板，主要有以下几个部分组成，我们可以将其分区，分为centre,left,foot三个部分。其中，centre主要是画板以及背景，left主要是形状的工具条，而foot就比较复杂，有颜色的工具条，以及坐标。（这里是主要部分，其他小附件先略过）
主要分为画图板部分和重绘保存部分
先来画图板部分
创建界面，代码如下：
public class Draw extends JFrame {
/**
* drawlistener要在第一个class中声明 创立监听器对象
*/
Drawlistener drawlistener;
// 主函数
public static void main(String args[]) {
// 创建窗体对象,打开画板对象,固定格式
Draw draw = new Draw();
draw.draw1();
}
/**
* 初始化窗体
*/
public void draw1() {
this.setTitle("画图板");
this.setSize(600, 500);
this.setBackground(java.awt.Color.gray);
// 居中显示
this.setLocationRelativeTo(null);
// 关闭方式
this.setDefaultCloseOperation(3);
// 设置画板的布局格式
// 切记BorderLayout是java.awt.BorderLayout下面的要在前面引入
BorderLayout borderlayout = new BorderLayout();
this.setLayout(borderlayout);
这样就初步做好了我们的登陆界面
这里要注意的是，1，最好要居中显示，不然自动默认到左上角。2，记得要有关闭方式，不然仍然存在在系统内存里面。3，记得要设置布局模式，在此处，我用的是BorderLayout。4，主函数主要起得是一个引入的作用里面不要放太多的东西。
再来简单介绍下BorderLayout:
这是一个布置容器的边框布局，它可以对容器组件进行安排，并调整其大小，使其符合下列五个区域：北、南、东、西、中。每个区域最多只能包含一个组件，并通过相应的常量进行标识：NORTH、SOUTH、EAST、WEST、CENTER。当使用边框布局将一个组件添加到容器中时，要使用这五个常量之一，例如：
Panel p = new Panel();
p.setLayout(new BorderLayout());
p.add(new Button("Okay"), BorderLayout.SOUTH);
设置下左边的工具条：
/**
* 开始工具条 左边
*/
// 创建左边的工作条,默认是水平的，我们此处要改成垂直的--vertical
javax.swing.JToolBar left = new javax.swing.JToolBar(
javax.swing.JToolBar.VERTICAL);
// 创建尺寸对象 记着要设计其长宽
java.awt.Dimension dimension1 = new java.awt.Dimension(70, 400);
// 设置大小 其传入的值是对象，所以传入dimension1
left.setPreferredSize(dimension1);
// 加在画板上面
this.add(left, BorderLayout.WEST);这里加在画板上的时候，要小心是在WEST~~
对比windows画板可知，左边的工具条是有很多按钮的，于是，我们在左边工具条上加一个buttongroup,并且设置布局，如代码所示：
left.setLayout(new FlowLayout(FlowLayout.CENTER, 0, 0));
// 按钮分组
javax.swing.ButtonGroup group = new ButtonGroup();
// 大小
Dimension dimension2 = new Dimension(30, 30);
这里将其布局设置为流式布局~
下面，加按钮：
// 直线的
// 加单选按钮
JRadioButton line = new JRadioButton("直线");
// 设置其动作命令
line.setActionCommand("line");
// 设置默认选中
line.setSelected(true);
// 放在组里面
group.add(line);
left.add(line);
// 矩形~
JRadioButton rectangle = new JRadioButton("矩形");
rectangle.setActionCommand("rectangle");
// 放在组里面
group.add(rectangle);
left.add(rectangle);
这里我只贴出直线和矩形的，其他的方法一样，复制即可，就不贴出来了~~
需要注意的是，要有个默认选中，我的默认选中是直线。
下面是centre的部分。
中间要创建两个Jpanel,先是背景的，要注意设置其背景颜色为灰色，不要忘了，还有要记得布局是centre
// 创建中间的panel
javax.swing.JPanel cjp = new JPanel();
// 设置中间的背景颜色
cjp.setBackground(java.awt.Color.gray);
// 加在画板上 都是borderlayout的
this.add(cjp, BorderLayout.CENTER);
再来是画板的
/**
* 给中间加绘制的面板 jpanel
*/
// 设置布局 流式中间左对齐
FlowLayout center = new FlowLayout(FlowLayout.LEFT);
this.setLayout(center);
// 创建面板对象
javax.swing.JPanel jp = new Panel1();
// 设置大小
jp.setPreferredSize(new Dimension(450, 350));
// 设置背景颜色
jp.setBackground(java.awt.Color.WHITE);
// 加
cjp.add(jp);
注意：1，要设置为左对齐。2，背景颜色为白色。
下面是底部
由于底部由两部分组成，颜色的工具条和坐标，因此我们要在底部设置一个Jpanel
javax.swing.JPanel southjp = new javax.swing.JPanel();
// 设置底部面板的大小
southjp.setPreferredSize(new java.awt.Dimension(100, 60));
// 加在画板上面
this.add(southjp, BorderLayout.SOUTH);
// 设置底部面板的布局
southjp.setLayout(new BorderLayout());
底部的颜色条因为和形状的工具条基本相同，就不贴代码了~
然后就是坐标滴，坐标也是一个Jpanel~，上面主要显示为两部分~
1：坐标移动的显示
2：显示出画图二字
// 再设置一个jpanel...
javax.swing.JPanel zhuangtailan = new javax.swing.JPanel();
// 设置底部面板的大小
zhuangtailan.setPreferredSize(new java.awt.Dimension(600, 30));
// 设置背景色
zhuangtailan.setBackground(java.awt.Color.white);
// 加在画板上面
southjp.add(zhuangtailan, BorderLayout.CENTER);
// 加label label,标签
JLabel left1 = new JLabel("画板");
JLabel center1 = new JLabel("");
JLabel right = new JLabel("");
// 加在zhuangtailan(jpanel)
zhuangtailan.add(left1);
zhuangtailan.add(center1);
zhuangtailan.add(right);
最后一步 就是传值和显示~~
传值这里要格外小心，要传入的值有graphics, center1, group1, group
且在监听器出要一一对应
// 显示
this.setVisible(true);
// 这些要放在setvisible之后~！
// 从jp上获取画布对象
java.awt.Graphics graphics = jp.getGraphics();
// 创建监听器对象
// 在第23行已经定义了drawlistener,这里就不需要再定义，不然会 出现空值
drawlistener = new Drawlistener(graphics, center1, group1, group);
// 给jp加鼠标监听器
jp.addMouseListener(drawlistener);
jp.addMouseMotionListener(drawlistener);
}
其余注释以及注意事项皆在代码里面
监听器
监听器要继承MouseListener, MouseMotionListener 两个接口
注意要实现接口中的所有方法
同时，一定要声明以及定义，具体如代码：
public class Drawlistener implements MouseListener, MouseMotionListener {
// 定义x1,x2,y1,y2
private int x1, x2, y1, y2;
// 声明Graphics 是画直线的~画图~
private java.awt.Graphics g1;
// 声明ButtonGroup
// 颜色的
private javax.swing.ButtonGroup color_group;
// 形状的
private javax.swing.ButtonGroup group;
// line,RoundRect;rectangle
private String type = "line";
private String type1 = "black";
// 声明JLabel
private javax.swing.JLabel centerjl;
接下来是传值
传值的时候一定要小心~~
不然会空值！！！！！！！！这里出错了n次~
// 说明下Graphics g1,JLabel centerjl,ButtonGroup gl, ButtonGroup group
public Drawlistener(java.awt.Graphics g1, javax.swing.JLabel centerjl,
ButtonGroup gl, ButtonGroup group) {
// 传值
// 设数值的时候一定要要小心啊
this.g1 = g1;
this.color_group = gl;// 传入选择颜色的group
this.group = group;// 传入选择图形的group
// 记得把JLabel的值传过来 不然又是空指针
this.centerjl = centerjl;
下面主要就是方法
先来介绍下MouseListener, MouseMotionListener 两个接口的方法以及我们所需要的
MouseListener：
| 方法摘要 | |
|---|---|
void |
mouseClicked(MouseEvent e) 鼠标按键在组件上单击（按下并释放）时调用。 |
void |
mouseEntered(MouseEvent e) 鼠标进入到组件上时调用。 |
void |
mouseExited(MouseEvent e) 鼠标离开组件时调用。 |
void |
mousePressed(MouseEvent e) 鼠标按键在组件上按下时调用。 |
void |
mouseReleased(MouseEvent e) 鼠标按钮在组件上释放时调用。 |
MouseMotionListener：
| 方法摘要 | |
|---|---|
void |
mouseDragged(MouseEvent e) 鼠标按键在组件上按下并拖动时调用。 |
void |
mouseMoved(MouseEvent e) 鼠标光标移动到组件上但无按键按下时调用。 |
其中，我们主要用到的方法有：
mousePressed(MouseEvent e){颜色 吸管}
mouseReleased(MouseEvent e) {形状，重绘保存}
mouseMoved(MouseEvent e)， mouseExited(MouseEvent e) {坐标的移动}
剩下的三个方法放在后面即可，不用~~
颜色 ，形状差不多
下面就贴出形状的代码
/**
* 形状
*/
// 在绘制前获取
javax.swing.ButtonModel buttonmodel = group.getSelection();
// 得到按钮模型的动作命令
type = buttonmodel.getActionCommand();
System.out.println(type);
// 得到鼠标按下时候的光标的坐标 用x1,y1来表示相对于画布
x1 = e.getX();
y1 = e.getY();
/**
* mouseReleased 鼠标释放 主要是画形状和截图保存
*/
public void mouseReleased(MouseEvent e) {
// 得到鼠标释放的时候光标的坐标用x2,y2来表示
x2 = e.getX();
y2 = e.getY();
/**
* 画形状
*/
// 开始画~ 直线
if (type.equals("10")) {
// 这是是固定格式
// 这里点的获取要小心~（x1,y1）
g1.drawLine(x1, y1, x2, y2);
}
// 矩形
if (type.equals("12")) {
g1.drawRect(Math.min(x1, x2), Math.min(y1, y2), Math.abs(x1 - x2),
Math.abs(y1 - y2));
System.out.print(g1 + "reck");
}
// 圆角矩形
if (type.equals("15")) {
g1.drawRoundRect(Math.min(x1, x2), Math.min(y1, y2),
Math.abs(x1 - x2), Math.abs(y1 - y2), 35, 35);
}
// 弧线
if (type.equals("11")) {
g1.drawArc(x1, y1, 200, 200, 150, 150);
}
这里可以看到，我type.equals后面跟的不是前面定义的变量名，这个会在后面解释，主要是牵涉到我们把按钮变成和windows画图板一样的图标
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
下面是重绘部分
重绘有两种方法。
一：队列
二：数组：1：二位数组
2：直接截图保存
但是，如果我们想把数据储存在硬盘里面，只能用二位数组的保存方法
下面详解用二维数组的保存方法
在界面里：
现在主函数里面声明drawlistener
接着 我们在写一个class
也即嵌套一个class
代码如下
class Panel1 extends javax.swing.JPanel {
/**
*
*/
private static final long serialVersionUID = 1L;
// 重写绘制方法
// 当改变时自动调用
// 重写paint，参数从ava.awt.Graphics graphics 调用
public void paint(java.awt.Graphics graphics) {
// 调用父类方法 此时不可用this 要用super
super.paint(graphics);
// if循环
// 在监听器中创建的二维数组
// drawlistener,drawlistener.keep不是空值的时候进入循环
if (drawlistener != null && drawlistener.keep != null) {
// 遍历
for (int i = 0; i < drawlistener.keep.length; i++) {
for (int j = 0; j < drawlistener.keep[i].length; j++) {
// 取颜色
int cNum = drawlistener.keep[i][j];
// 若储存颜色变 了，就在绘制一次
if (cNum != this.getBackground().getRGB()) {
// 数字转颜色~强制转型
Color color = new Color(cNum);
// 绘制点
graphics.setColor(color);
graphics.drawLine(j, i, j, i);
}
}
}
}
}
}
}
1：这里的原理，就是把整幅图保存在内存里面，依据是其颜色的改变
2：关键字这里不可再用this，要用super~
下面是监听器
首先，声明保存的二维数组，在创建一个robot对象
*/
// 声明保存的二维数组(绘制区域)
int[][] keep;
// 声明robot
java.awt.Robot robot;robot要写在public drawlistener里面
添加后代码如下
public Drawlistener(java.awt.Graphics g1, javax.swing.JLabel centerjl,
ButtonGroup gl, ButtonGroup group) {
// 传值
// 设数值的时候一定要要小心啊
this.g1 = g1;
this.color_group = gl;// 传入选择颜色的group
this.group = group;// 传入选择图形的group
// 记得把JLabel的值传过来 不然又是空指针
this.centerjl = centerjl;
// robot
/**
* 报错出现Unhandeled Exception...要加上try{}catch{} 这里就是个格式~
*/
try {
robot = new java.awt.Robot();
} catch (Exception ef) {
ef.printStackTrace();
}
}
1:try...catch是固定的格式
2：关于报错 如果出现Syntax error on token(s)...表示要加()
主要写在mouseReleased(MouseEvent e)里面 具体代码如下
Object object = e.getSource();
// object一定是中间绘制的面板将jpanel对象---jp~
javax.swing.JPanel jp = (javax.swing.JPanel) object;
// 得到jp左上角坐标，获取相对屏幕的坐标
java.awt.Point leftpoint = jp.getLocationOnScreen();
// 得到宽度 高度
java.awt.Dimension dimension1 = jp.getPreferredSize();
// 创建截取的区域对象，以jp左上角为起点，jp的大小
// 区域对象是长方形 所以用rectangle
java.awt.Rectangle rectangle = new java.awt.Rectangle(leftpoint,
dimension1);
// 截图
java.awt.image.BufferedImage image = robot
.createScreenCapture(rectangle);
/**
* 创建二维数组
*/
keep = new int[image.getHeight()][image.getWidth()];
// 写两个for循环
for (int i = 0; i < keep.length; i++) {
for (int j = 0; j < keep[i].length; j++) {
// 获取图像对应坐标点颜色，储存在数组中，对应的下标位置
/**
* 这里要小心 联系线代 i=y,j=x 不然就会弄反
*/
keep[i][j] = image.getRGB(j, i);
}
}
}
1：i=y,j=x,这里一定要注意！
2：截图只要是截的是矩形的区域
这样~~我们基本的架构已经做完啦~~
最后一步，就是美化一下~~
将按钮变成图标
主要也是用数组
首先，先要截好图~~（按钮的图片）
在将其放在代码所在的文件夹下面
先屏蔽掉以前的
新代码如下~
String[] commands = { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
"10", "11", "12", "13", "14", "15", "16" };
for (int i = 0; i < commands.length; i++) {
// 单选按钮
JRadioButton shape = new JRadioButton();
// 设置大小
// 小心这里传值又别弄错了！！！
shape.setPreferredSize(dimension2);
// 设置内边距
shape.setMargin(new java.awt.Insets(0, 0, 0, 0));
// 因为鼠标按下时候有4种形态
// 创建4个图标ImageIcon---图标对象
javax.swing.ImageIcon image1 = new javax.swing.ImageIcon(
"images/draw" + i + ".jpg");
javax.swing.ImageIcon image2 = new javax.swing.ImageIcon(
"images/draw" + i + "-1.jpg");
javax.swing.ImageIcon image3 = new javax.swing.ImageIcon(
"images/draw" + i + "-2.jpg");
javax.swing.ImageIcon image4 = new javax.swing.ImageIcon(
"images/draw" + i + "-3.jpg");
// 设置4种形态
shape.setIcon(image1);
shape.setRolloverIcon(image2);
shape.setPressedIcon(image3);
shape.setSelectedIcon(image4);
// 动作命令
shape.setActionCommand(commands[i]);
if (i == 6)
shape.setSelected(true);
// 放进组
group.add(shape);
// 加在左边的工具条上
left.add(shape);
}
现在，知道我前面监听器里面的11等数字的代表了吧~~~
画图板总体的架构已经完成，剩余的，就是其他功能的实现~~