Java를 사용하여 간단한 드로잉 보드를 만드는 방법에 대한 튜토리얼

많은 분들이 Windows 드로잉 패드를 사용해 보셨을 거라 생각합니다. 이번에는 간단한 드로잉 보드의 Java 버전 구현에 대해 이야기해보겠습니다.

기본 아이디어는 다음과 같습니다. 드로잉 보드의 구현은 대략 세 부분으로 나뉩니다. 첫 번째는 드로잉 보드 인터페이스의 구현이고, 두 번째는 드로잉 보드의 모니터링 및 드로잉 구현입니다. 세 번째는 드로잉 보드를 다시 그리는 것입니다. (글이 길지만 코드는 프로그레시브합니다. 세 부분으로 분리하시면 됩니다. 현재 부분을 구현한 후 다음 부분으로 넘어갑니다.) 첫 번째는 드로잉보드의 인터페이스 구현입니다. 특정 아이콘과 인터페이스의 경우 인터페이스의 모든 구성 요소가 Swing 자체 구성 요소이므로 인터페이스가 다소 투박하지만 최적화하려면 인터페이스의 모든 구성 요소를 사용자 정의 아이콘으로 변경하면 됩니다. 인터페이스를 구현한 후에는 인터페이스 구성 요소에 모니터링을 추가하는 것을 고려할 수 있습니다. 특정 상황에 따라 다양한 그래픽을 통해 다양한 모니터링 방법을 추가할 수 있습니다. 그런 다음 다양한 그래픽을 기반으로 특정 그리기 알고리즘을 작성하는 이벤트 처리 클래스를 작성합니다. 드로잉 보드의 간단한 버전이 거의 완성되었습니다. 여기서 다시 그리는 것은 나중에 언급하지 않겠습니다.

먼저 그리기 인터페이스 구현을 살펴보겠습니다.

그리기 인터페이스를 구현하는 데 필요한 주요 API 클래스는 FlowLayout, GridLayout, Color, Dimension, JButton, JFrame, JPanel.

Draw 클래스를 정의하고 Draw 클래스가 JFrame을 상속하도록 합니다. 크기, 제목, 가시성 등을 설정합니다. 여기서 추가할 버튼이 많은 경우 배열을 사용하여 버튼 추가를 완료하는 것이 좋습니다. 버튼을 하나씩 직접 추가하면 코드의 양이 늘어날 뿐만 아니라, 또한 검색, 추가 및 코드 유지 관리에도 해로울 수 있습니다. 인터페이스를 그렇게 단순하지 않게 만들기 위해 여기에는 여러 Jpanel과 다양한 레이아웃 관리자가 사용됩니다. 기본 양식은 유동 레이아웃 관리자를 사용한 다음 세 개의 패널을 사용하여 각각 그래픽 버튼, 색상 버튼 및 캔버스를 호스팅합니다. 그래픽 버튼과 컬러 버튼이 포함된 패널은 테이블 레이아웃을 사용합니다. 그러면 기본적으로 인터페이스 구현이 완료됩니다.

package Cbs;import java.awt.Color;import java.awt.Dimension;import java.awt.FlowLayout;import java.awt.GridLayout;import javax.swing.JButton;import javax.swing.JFrame;import javax.swing.JPanel;/**
 * Draw类，用于界面的初始化
 * @author CBS */@SuppressWarnings("serial")public class Draw extends JFrame {// 界面初始化方法public void showUI() {
        setTitle("画图");//窗体名称setSize(1200, 900);//窗体大小setDefaultCloseOperation(3);
        setLocationRelativeTo(null);//窗体居中//流式布局左对齐FlowLayout layout = new FlowLayout(FlowLayout.LEFT);
        setLayout(layout);//窗体使用流式布局管理器this.setResizable(false);//窗体大小不变        //使用数组保存按钮名String buttonName[] = { "画直线", "画椭圆", "画曲线", "多边形", 
                  "橡皮擦", "拖动线","三角形", "画球形", "笔刷", "喷枪", 
                  "色子", "立体矩形", "立体圆", "立体三角","迭代分形",                   "现代分形", "枫叶", "画树", "mandelbrot集", "L-System",                  "迭代画线","迭代三角形", "谢尔宾斯基地毯", "画字符", "清空",                  "吸管" ,"矩形","五角星","多线","字符"};//用于保存图形按钮，使用网格布局JPanel jp1=new JPanel(new GridLayout(15, 2,10,10));
        jp1.setPreferredSize(new Dimension(200, 800));        //循环为按钮面板添加按钮for (int i = 0; i 

코드 보기

여기서 또 한 가지 주의할 점은 Jpanel 패널을 추가하는 순서를 변경하면 안 된다는 점입니다. 이는 흐름을 기준으로 계산된 패널 크기입니다. 레이아웃을 사용하면 독자가 스스로 변경하고 디버그할 수 있습니다. 또 다른 점은 양식의 setSize 메소드가 양식 자체에만 유효하다는 것입니다. 다른 구성요소의 크기를 변경하려면 setPreferredSize 메소드를 사용하십시오. 이런 식으로 드로잉보드의 기본 인터페이스가 구현됩니다. 인터페이스의 버튼과 패널은 필요에 따라 변경될 수 있습니다.

인터페이스는 다음과 같습니다:

모니터링 구현:

当然我们空有个界面并没有什么用，我们需要的是点击不同的按钮能够实现不同的功能。这里就需要用到事件的监听机制了。实现监听的主要API类有： ActionListener，MouseListener，MouseMotionListener。添加事件监听的方法根以前的步骤是一样的：确定事件源对象，编写事件处理类，添加监听方法。画图板中的事件源对象有两种，一种是按钮，另一种就是画布的面板，按钮使用的是ActionListener，而画布面板因为负责的是绘图，所以使用的是MouseListener和MouseMotionListener。为了实现事件的监听，我们需要定义一个事件处理类DrawListener，该类实现了以上的三个事件接口。之后在重写的方法中实现不同图形的绘制。图形的绘制都可以通过Graphics对象的方法来实现。但是这里有一个问题，如何分辨在Draw类中按下的是哪个按钮呢？在定义Draw类的时候，我们使用了图形按钮和颜色按钮，图形类的按钮在实例化对象的时候是使用了带参数的构造方法的，也就是图形按钮都是有文字的，而颜色按钮则没有。依据这一点就可以很容易的区分不同的按钮了。

DrawListener类：

package Cbs;import java.awt.Color;import java.awt.Graphics;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.awt.event.MouseEvent;import java.awt.event.MouseListener;import java.awt.event.MouseMotionListener;import javax.swing.JButton;public class DrawListener implements ActionListener, MouseListener,
        MouseMotionListener {private Color color;//颜色属性private Graphics g;//画笔属性private String str;//保存按钮上的字符串，区分不同的按钮private int x1,y1,x2,y2;//(x1,y1),(x2,y2)分别为鼠标的按下和释放时的坐标private JButton nowColor;//当前颜色按钮    //获取Draw类的画笔对象public void setG(Graphics g) {this.g = g;
    }//获取当前颜色按钮public void setNowColor(JButton nowColor) {this.nowColor = nowColor;
    }


    @Override//鼠标拖动的方法public void mouseDragged(MouseEvent e) {//画曲线的方法if ("画曲线".equals(str)) {int x, y;
            x = e.getX();
            y = e.getY();
            g.drawLine(x, y, x1, y1);
            x1 = x;
            y1 = y;
        }
    }

    @Override//鼠标移动方法public void mouseMoved(MouseEvent e) {

    }

    @Override//鼠标单击方法public void mouseClicked(MouseEvent e) {

    }

    @Override//鼠标按下方法public void mousePressed(MouseEvent e) {
        
        g.setColor(color);//改变画笔的颜色        
        x1=e.getX();//获取按下时鼠标的x坐标y1=e.getY();//获取按下时鼠标的y坐标    }

    @Override//鼠标释放方法public void mouseReleased(MouseEvent e) {
        x2=e.getX();//获取释放时鼠标的x坐标y2=e.getY();//获取释放时鼠标的y坐标//画直线的方法if ("画直线".equals(str)) {
            g.drawLine(x1, y1, x2, y2);
        }
    }

    @Override//鼠标进入方法public void mouseEntered(MouseEvent e) {

    }

    @Override//鼠标退出方法public void mouseExited(MouseEvent e) {

    }

    @Override//处理按钮上的鼠标点击动作public void actionPerformed(ActionEvent e) {//判断是颜色按钮还是图形按钮if ("".equals(e.getActionCommand())) {
            JButton jb = (JButton) e.getSource();
            color = jb.getBackground();
            nowColor.setBackground(color);//处理当前颜色} else {
            str = e.getActionCommand();
        }
    }

}

View Code

Draw类也要做一些修改，为按钮和面板添加监听：

 1 package Cbs; 2  3 import java.awt.Color; 4 import java.awt.Dimension; 5 import java.awt.FlowLayout; 6 import java.awt.Graphics; 7 import java.awt.GridLayout; 8  9 import javax.swing.JButton;10 import javax.swing.JFrame;11 import javax.swing.JPanel;12 13 /**14  * Draw类，用于界面的初始化15  * @author CBS16  */17 @SuppressWarnings("serial")18 public class Draw extends JFrame {19     private DrawListener dl;20     private Graphics g;21     // 界面初始化方法22     public void showUI() {23         setTitle("画图");//窗体名称24         setSize(1200, 900);//窗体大小25         setDefaultCloseOperation(3);26         setLocationRelativeTo(null);//窗体居中27                 //流式布局左对齐28         FlowLayout layout = new FlowLayout(FlowLayout.LEFT);29         setLayout(layout);//窗体使用流式布局管理器30         this.setResizable(false);//窗体大小不变31         32         //使用数组保存按钮名33         String buttonName[] = { "画直线", "画椭圆", "画曲线", "多边形",34                       "橡皮擦", "拖动线","三角形", "画球形", "笔刷", "喷枪", 
35                       "色子", "立体矩形", "立体圆", "立体三角","迭代分形",36                        "现代分形", "枫叶", "画树", "mandelbrot集", "L-System", 
37                        "迭代画线","迭代三角形", "谢尔宾斯基地毯", "画字符", "清空",38                       "吸管" ,"矩形","五角星","多线","字符"};39                 //用于保存图形按钮，使用网格布局40         JPanel jp1=new JPanel(new GridLayout(15, 2,10,10));41         jp1.setPreferredSize(new Dimension(200, 800));42         43         //实例化DrawListener对象44         dl=new DrawListener();45         //循环为按钮面板添加按钮46         for (int i = 0; i 

View Code

drawDrawListener里面只写了画直线和曲线的方法，读者可以根据自己的需求添加，思路和方式都是一样的。Draw类里面有些需要注意的地方在这里提一下：一个是画笔g的获取一定要在窗体的可见之后采取获取，不然获取的画笔对象返回值会是null。二是要为图形按钮添加监听，DrawListener的实例化需要在setVisible方法之前，所以不建议使用构造方法直接传入g画笔参数，我使用的是set方法。最后是注意一下使用哪个添加方法，按钮使用的是addActionListener方法，画板面板使用的是addMouseListener和addMouseMotionListener方法。使用画板面板来获取画笔并给画面面板添加监听是为了让绘图的时候图形不会跑出面板外，这里的画笔和监听都由主窗体获得也是可以的，不过绘制时会出现线画出面板的问题。

画板的重绘：

到这里画板的制作已经基本实现了，我们已经可以在上面绘制各种各样的图形了。但是细心的人可能会发现一个问题，那就是如果把窗体最小化之后再次打开，画板上原本已经画好的东西会全部都消失了。这样子肯定是不行的，辛辛苦苦画的“大作”怎么能说说没就没了呢。那么为什么会出现这样的问题呢？要回答这个问题我们就需要先了解Java的绘图机制。做画图板我们使用的是Swing组件，这套组件是基于原先的AWT组件开发，在绘制的时候会调用系统的画图函数，这就是为什么我们可以从面板或者是窗体中获取画笔对象的原因。这也就是说Java中你所能够看到窗体，按钮或者其它的所有组件其实都是画出来。所以当我们点击窗体使它最小化或者改变大小的时候，原来的画的窗体就不能适应需要了，这时系统会调用JFrame的paint方法实现窗体的重绘，也就是再次画了一个新的窗体，而JFrame的paint方法只对窗体已经添加的组件有效，我们自己绘制的东西并没有写在paint方法里面，所以窗体重绘之后，我们原先绘制的图形也就消失了。要解决这个问题我们需要重写父类的paint方法。但是这样的话问题又来了，画图是在DrawListener类里面实现的，要怎么把它们弄到paint方法里面去呢？

当然方法可能有很多，这里我只介绍我所知道的：要把画出来的图形在paint方法中再次画出来，就需要有东西来保存画过的图形。保存可以使用数组或者集合，这里推荐使用集合，可以很方便的实现添加，而不需要去考虑大小的问题。数组的实现也大同小异，这里就不多做介绍。确定了使用集合，那么集合内保存什么类型的数据呢？毫无疑问应该保存的是图形的数据，但是集合使用泛型的话也只能保存同一种类型的数据，我们却有那么多种图形？这里就可以使用接口或者抽象类，我们只需要创建不同得图形类，让它继承抽象类或者是实现接口。然后每画一个图形就实例化一个图形的对象，存入集合中，最后在paint方法中遍历集合，重新绘制图形即可。

下面直接贴最终代码（仍然只写了直线和曲线），只是添加了几行代码，注意与前面比较。

//图形接口package Cbs;//图形集合public interface NetJavaShape {public abstract void draw();
}//直线类package Cbs;import java.awt.Color;import java.awt.Graphics;import Cbs.NetJavaShape;public class ImpLine implements NetJavaShape{
    Graphics g;int x1, y1,x2, y2;
    Color c;public ImpLine(Graphics g,int x1,int y1,int x2,int y2,Color c){this.g=g;this.c=c;this.x1=x1;this.y1=y1;this.x2=x2;this.y2=y2;
    }public void draw() {
        g.setColor(c);
        g.drawLine(x1, y1, x2, y2);
    }

}//DrawListener类package Cbs;import java.awt.Color;import java.awt.Graphics;import java.util.List;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.awt.event.MouseEvent;import java.awt.event.MouseListener;import java.awt.event.MouseMotionListener;import java.util.ArrayList;import Cbs.NetJavaShape;import javax.swing.JButton;public class DrawListener implements ActionListener, MouseListener,
        MouseMotionListener {private Color color=Color.BLACK;//颜色属性,初始值为黑色private Graphics g;//画笔属性private String str;//保存按钮上的字符串，区分不同的按钮private int x1,y1,x2,y2;//(x1,y1),(x2,y2)分别为鼠标的按下和释放时的坐标private JButton nowColor;//当前颜色按钮//保存图形对象的集合private List<netjavashape> shapesArray = new ArrayList<netjavashape>();//图形private NetJavaShape shape;//在draw类中获取集合public List<netjavashape> getShapesArray() {return shapesArray;
    }//获取Draw类的画笔对象public void setG(Graphics g) {this.g = g;
    }//获取当前颜色按钮public void setNowColor(JButton nowColor) {this.nowColor = nowColor;
    }


    @Override//鼠标拖动的方法public void mouseDragged(MouseEvent e) {//画曲线的方法if ("画曲线".equals(str)) {int x, y;
            x = e.getX();
            y = e.getY();//实例化对象，曲线也是直线画的所以不同新建一个曲线类了shape=new ImpLine(g,x,y,x1,y1,color);//调用画图方法            shape.draw();//将图形存入集合中            shapesArray.add(shape);//            g.drawLine(x, y, x1, y1);x1 = x;
            y1 = y;
        }
    }

    @Override//鼠标移动方法public void mouseMoved(MouseEvent e) {

    }

    @Override//鼠标单击方法public void mouseClicked(MouseEvent e) {

    }

    @Override//鼠标按下方法public void mousePressed(MouseEvent e) {
        
        g.setColor(color);//改变画笔的颜色        
        x1=e.getX();//获取按下时鼠标的x坐标y1=e.getY();//获取按下时鼠标的y坐标    }

    @Override//鼠标释放方法public void mouseReleased(MouseEvent e) {
        x2=e.getX();//获取释放时鼠标的x坐标y2=e.getY();//获取释放时鼠标的y坐标//画直线的方法if ("画直线".equals(str)) {//实例化对象，shape=new ImpLine(g,x1,y1,x2,y2,color);//调用画图方法            shape.draw();//将图形存入集合中            shapesArray.add(shape);//            g.drawLine(x1, y1, x2, y2);        }
    }

    @Override//鼠标进入方法public void mouseEntered(MouseEvent e) {

    }

    @Override//鼠标退出方法public void mouseExited(MouseEvent e) {

    }

    @Override//处理按钮上的鼠标点击动作public void actionPerformed(ActionEvent e) {        if ("".equals(e.getActionCommand())) {
            JButton jb = (JButton) e.getSource();
            color = jb.getBackground();
            nowColor.setBackground(color);//处理当前颜色} else {
            str = e.getActionCommand();
        }
    }

}//draw类package Cbs;import java.awt.Color;import java.awt.Dimension;import java.awt.FlowLayout;import java.awt.Graphics;import java.awt.GridLayout;import java.util.ArrayList;import java.util.List;import javax.swing.JButton;import javax.swing.JFrame;import javax.swing.JPanel;/**
 * Draw类，用于界面的初始化
 * @author CBS */@SuppressWarnings("serial")public class Draw extends JFrame {private DrawListener dl;private Graphics g;//保存图形对象的集合private List<netjavashape> shapesArray = new ArrayList<netjavashape>();// 界面初始化方法public void showUI() {
        setTitle("画图");//窗体名称setSize(1200, 900);//窗体大小setDefaultCloseOperation(3);
        setLocationRelativeTo(null);//窗体居中FlowLayout layout = new FlowLayout(FlowLayout.LEFT);//流式布局左对齐setLayout(layout);//窗体使用流式布局管理器this.setResizable(false);//窗体大小不变        //使用数组保存按钮名String buttonName[] = { "画直线", "画椭圆", "画曲线", "多边形",     "橡皮擦", "拖动线","三角形", "画球形", "笔刷", "喷枪", "色子", "立体矩形", "立体圆", "立体三角","迭代分形", "现代分形", "枫叶", "画树", "mandelbrot集", "L-System", "迭代画线","迭代三角形", "谢尔宾斯基地毯", "画字符", "清空","吸管" ,"矩形","五角星","多线","字符"};
        JPanel jp1=new JPanel(new GridLayout(15, 2,10,10));//用于保存图形按钮，使用网格布局jp1.setPreferredSize(new Dimension(200, 800));        //实例化DrawListener对象dl=new DrawListener();//循环为按钮面板添加按钮for (int i = 0; i </netjavashape></netjavashape></netjavashape></netjavashape></netjavashape>

View Code

这里使用集合添加图形实现画板的重绘时，我是每实现一个图形就会新建一个类来保存图形的信息，这样图形类就会有很多。如果不想创建那么多的图形类可以把它们都放到一个类里面，设置一个type的参数，赋上按钮的名称。然后在draw方法中依据这个值判断是什么图形实现不同的画图方法。这样画板的所有功能基本就实现了，画板的项目也就到这里。

总结：

드로잉 보드 제작에는 주로 Swing 구성요소, 이벤트 청취 메커니즘, 그래픽 드로잉 및 드로잉 보드 다시 그리기 및 컬렉션 사용이 표준 그래픽 클래스로 사용됩니다.

Listener 클래스

package com.baidu;

import java.awt.*;
import java.awt.event.Mo useEvent;
자바 가져오기. awt.event.MouseListener;

public class MyMouseListener는 MouseListener를 구현합니다.{
//Color
패널 p;
//Canvas
그래픽 g;
//Action command
private SimpleDraw draw;
//좌표 제공
private int x1 , y1,x2,y2;
//구성 방법


public MyMouseListener(SimpleDraw draw){
this.g=draw.getGraphics();//전달된 객체 값을 속성에 할당 g
this.draw= draw;

}


//마우스가 컴포넌트에 들어갈 때 호출
@Override
public void mouseClicked(MouseEvent e) {
}
//마우스가 컴포넌트를 떠날 때 호출
@Override
public void mouseEntered(MouseEvent e) {
}
@Override
public void mouseExited(MouseEvent e) {
}
@Override
public void mousePressed(MouseEvent e) {
x1=e.getX();
y1=e.getY()
}
@Override
public void mouseReleased(MouseEvent e) {
x2=e.getX();
y2=e.getY();
String command = draw.getCommand();
g.setColor(Color.blue);


if(command.equals("Line")){
g.drawLine(x1, y1, x2, y2);

}else if(command.equals("사각형")){
g.drawRect(x1 , y1, x2-x1, y2-y1);

}else if(command.equals("ellipse")){
g.drawOval(x1, y1, x2-x1, y2-y1);
}
}
}ㅋㅋㅋ

위 내용은 Java를 사용하여 간단한 드로잉 보드를 만드는 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!