Drawing board development

Drawing board development

DrawUI.java

First of all, the old rules. It is also a good habit to build a package first. It is a good habit to build a package for every project. This habit is good for your later review and modification.

This English is also very easy to understand, just draw the board
and then have the experience of developing the last SimQQ interface, we know that we need to build an interface first.
So we built a class called DrawUI

public class DrawUI{
public void showUI(){
}

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

This basic operation is ready, and then start to write our interface.
First of all, the same as before, add the form JFrame, remember to add the package to be used above.

//为了方便，我们可以这样，这就相当于加入了全部的包
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();
}
}

Click above to run, you can see that we get a basic form

with buttons on the top and pictures on the bottom.
Both are set by me abovenorth withcenterdistinguish.
Next add our button.

//为了方便，我们可以这样，这就相当于加入了全部的包
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();
}
}

Even if the above interface is basically written, run to see the effect.

Then is the second step, addListener。

BtnListener.java

First of all, we add an action listener ActionListener, used to listen to our mouse click button this action.

public class BtnListener implements ActionListener{

}

At this time, an error will be reported because we used the interface, but we did not add all the methods in the interface.
The place where the error is reported is our BtnListener, put the mouse under it, then click the first solution to

solve it, and then start to write our monitoring content.

Here we notice that some of the above buttons areString "Line", etc., some only have color, So our method should be written like this.

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

Create a class called DrawListener

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

Similarly, we have to introduce the interface method.

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) {}

}

Then our listener is complete!
Next, we only need to add our listener to our interface.

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();
}
}

Then our drawing board is complete!
Look at the effect.

The slider above is also a component, I added it later, the method is not written on it, everyone can ignore it, and then master the method, we can do it ourselves, what other functions do you want to draw on the board, everyone You can do it yourself.
over ~