画图板的开发

画图板的开发

DrawUI.java

首先还是老规矩，先建一个包，这也是一个好习惯，每做一个项目就建一个包，这个习惯有利于你之后的回顾以及修改。

这英文也很好看懂，就画图板呗
然后有了上一个SimQQ界面的开发的经验，我们就知道，要先建一个界面。
于是我们建一个类，起名叫DrawUI

public class DrawUI{
public void showUI(){
}

//习惯性的添加主函数
public static void main(String[] args){
DrawUI ui = new DrawUI();
ui.showUI();
}
}

这个基本的操作已经准备好，然后就开始编写我们的界面吧。
首先还是老样子，添加窗体JFrame，这上面要用到的包要记得添加。

//为了方便，我们可以这样，这就相当于加入了全部的包
import.java	.awt.*
import.javax.swing.*

public class DrawUI{
public void showUI(){
//添加窗体并且设置属性
    JFrame dr = new JFrame();
    dr.setSize(1000,600);
    dr.setLocationRelativeTo(null);
    dr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE );
//添加布局
    JPanel north = new JPanel();//这里是边框布局，分东南西北中五块。
    north.setPreferredSize(new Dimension(0,30));//设置我们的北边框宽度是30
    dr.add(north,BorderLayout.NORTH);//将我们的边框加入到窗体上
    
    JPanel center = new JPanel();//这里是边框布局，分东南西北中五块。
    dr.add(center,BorderLayout.CENTER);//将我们的中部加入到窗体上
    center.setBackground(Color.WHITE);

    dr.setVisible(true);//
}

//习惯性的添加主函数
public static void main(String[] args){
DrawUI ui = new DrawUI();
ui.showUI();
}
}

以上点击运行，可以看到我们得到一个基本的窗体

上面是放按钮的，下面是画图的。
二者由我上面设定的north 和center区分。
接下来添加我们的按钮。

//为了方便，我们可以这样，这就相当于加入了全部的包
import.java	.awt.*
import.javax.swing.*

public class DrawUI{
public void showUI(){
//添加窗体并且设置属性
    JFrame dr = new JFrame();
    dr.setSize(1000,600);
    dr.setLocationRelativeTo(null);
    dr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE );
//添加布局
    JPanel north = new JPanel();//这里是边框布局，分东南西北中五块。
    north.setPreferredSize(new Dimension(0,30));//设置我们的北边框宽度是30
    dr.add(north,BorderLayout.NORTH);//将我们的边框加入到窗体上
    
    JPanel center = new JPanel();//这里是边框布局，分东南西北中五块。
    dr.add(center,BorderLayout.CENTER);//将我们的中部加入到窗体上
    center.setBackground(Color.WHITE);
//添加按钮
        JButton btn = new JButton("Line");//画直线的按钮
        north.add(btn);
        
        JButton btn1 = new JButton("Rect");//画矩形的按钮
        north.add(btn1);
        
        JButton btn2 = new JButton("Roun");//画圈的按钮
        north.add(btn2);
        
        JButton btn3 = new JButton("Oval");//画填充圆的按钮
        north.add(btn3);
        
        JButton btn4 = new JButton();
        btn4.setBackground(Color.RED);    //设置颜色的按钮
        btn4.setPreferredSize(new Dimension  (40,30));
        north.add(btn4);
		
        JButton btn5 = new JButton();
        btn5.setBackground(Color.BLUE);   //设置颜色的按钮
        btn5.setPreferredSize(new Dimension  (40,30));
        north.add(btn5);
        
        dr.setVisible(true);//别忘了这一句使窗体可见
}

//习惯性的添加主函数
public static void main(String[] args){
DrawUI ui = new DrawUI();
ui.showUI();
}
}

以上我们的界面就算是基本写好了，运行一下看效果。

然后就是第二步，添加监听器。

BtnListener.java

首先我们添加一个动作监听器ActionListener，用来监听我们的鼠标点击按钮这个动作。

public class BtnListener implements ActionListener{

}

这时会报错，因为我们用了接口，但是并没有把接口里的方法都加上。
报错的地方是我们的 BtnListener，把鼠标放下它的下面，然后点击第一个解决办法

就解决了，然后开始写我们的监听内容。

这里我们注意到，上面的按钮有的是有字符串“Line”等，有的只有颜色，因此我们的方法要这样写。

public class BtnListener implements ActionListener{
    String cmd="0";
    Graphics g;
    public void actionPerformed(ActionEvent e) {
    	if(e.getActionCommand().equals("")) {
    	    //获取按钮上设置的颜色
    		Object sourceObj = e.getSource();
    		JButton btn = (JButton)sourceObj;
    		Color color = btn.getBackground();
    		g.setColor(color);
    	}else {
    	    //获取按钮上的字符串
    		cmd = e.getActionCommand();
    	}
    	
    }
}

DrawListener.java

建立一个类，名叫DrawListener

public class DrawListener implements MouseListener{
//定义我们的变量
    int startx;
    int starty;
    int endx;
    int endy;
    Graphics g;
}

同样的我们要把接口的方法引入。

public class DrawListener implements MouseListener,ChangeListener{
    int startx,starty,endx,endy;
    
	Graphics g;
	BtnListener btn;//建立我们动作监听器的对象
	
	
	public void mousePressed(MouseEvent e) {
		//按下时获取起始坐标
		startx = e.getX();
		starty = e.getY();
	}
	public void mouseReleased(MouseEvent e) {
		//松开时获取终点坐标
		endx = e.getX();
		endy = e.getY();
		
	//画线
	if(btn.cmd.equals("Line")) {
		g.drawLine(startx,starty,endx,endy);
	}
	//画矩形
	if(btn.cmd.equals("Rect")) {
		g.drawRect(startx,starty,endx,endy);
	}
	//画圈
	if(btn.cmd.equals("Roun")) {
		g.drawOval(startx,starty, 300, 280);
	}
	//画填充圆
	if(btn.cmd.equals("Oval")) {
		g.fillOval(startx,starty, 300, 280);
	}

	System.out.println(startx+","+starty+"--"+","+endy);
}
	public void mouseClicked(MouseEvent e) {}
    public void mouseEntered(MouseEvent e) {}
    public void mouseExited(MouseEvent e) {}

}

然后我们的监听器就完成啦！
接下来只需要在我们的界面中加上我们的监听器就可以了。

import.java	.awt.*
import.javax.swing.*

public class DrawUI{
public void showUI(){
//添加窗体并且设置属性
    JFrame dr = new JFrame();
    dr.setSize(1000,600);
    dr.setLocationRelativeTo(null);
    dr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE );
//添加布局
    JPanel north = new JPanel();//这里是边框布局，分东南西北中五块。
    north.setPreferredSize(new Dimension(0,30));//设置我们的北边框宽度是30
    dr.add(north,BorderLayout.NORTH);//将我们的边框加入到窗体上
    
    JPanel center = new JPanel();//这里是边框布局，分东南西北中五块。
    dr.add(center,BorderLayout.CENTER);//将我们的中部加入到窗体上
    center.setBackground(Color.WHITE);
//添加按钮
        JButton btn = new JButton("Line");//画直线的按钮
        north.add(btn);
        
        JButton btn1 = new JButton("Rect");//画矩形的按钮
        north.add(btn1);
        
        JButton btn2 = new JButton("Roun");//画圈的按钮
        north.add(btn2);
        
        JButton btn3 = new JButton("Oval");//画填充圆的按钮
        north.add(btn3);
        
        JButton btn4 = new JButton();
        btn4.setBackground(Color.RED);    //设置颜色的按钮
        btn4.setPreferredSize(new Dimension  (40,30));
        north.add(btn4);
		
        JButton btn5 = new JButton();
        btn5.setBackground(Color.BLUE);   //设置颜色的按钮
        btn5.setPreferredSize(new Dimension  (40,30));
        north.add(btn5);
        
        dr.setVisible(true);//使窗体可见


        //创建监听器
        DrawListener drawL = new DrawListener();//鼠标监听器
        BtnListener btnListener = new BtnListener();//动作监听器
        //获取窗体的画布
        drawL.g= center.getGraphics();
        
        //添加监听器
		center.addMouseListener(drawL);
		btn.addActionListener(btnListener);
		btn1.addActionListener(btnListener);
		btn2.addActionListener(btnListener);
		btn3.addActionListener(btnListener);
		btn4.addActionListener(btnListener);
		btn5.addActionListener(btnListener);
		
        //将动作监听器的对象传给鼠标监听器
		drawL.btn = btnListener;
		btnListener.g=drawL.g;
}

//习惯性的添加主函数
public static void main(String[] args){
DrawUI ui = new DrawUI();
ui.showUI();
}
}

然后我们的画板就完成啦！
看看效果。

上面那个滑杆也是一个组件，我后来加着玩的，方法没写在上面，大家可以不用理会，然后掌握了方法，我们就可以自己做下去，画图板还有什么想要的的功能，大家都可以自己动手实现。
over~