由画板实例来把握代码编写格式和提高编程能力以及OOP思想的实践

 

 

由画板实例来把握代码编写格式和提高编程能力以及OOP思想的实践

画板的实例具体分为以下几个步骤：

1.主类的定义

首先创建主类，在当中声明一个窗体对象，并调用它的showUI方法。接下来自然就是新建一个MainFrame类

importjavax.swing.JFrame;

importjavax.swing.UnsupportedLookAndFeelException;

publicclass huaban {

    publicstaticvoid main(String[] args)

    {

      MainFrame mf=new MainFrame();

      mf.showUI();

    }

}

1.    MainFrame类，MainFrame继承JFrame类。并在其中实现窗体的基本界面UI设计。UI的设计总共分为以下几步：

// 对整个界面做初始化，大小，位置，默认关闭，标题

init();

publicvoid init() {

       setTitle("我的画板");

       //通过相对路径创建一个ImageIcon的对象

       ImageIconii =new ImageIcon("img/icon.png");

       从imageIcon对象中获取image，设置上去

       setIconImage(ii.getImage());

       设置窗体大小

       setSize(600,600);

       设置位置居于屏幕中间

       setLocationRelativeTo(null);

       设置默认关闭

       setDefaultCloseOperation(EXIT_ON_CLOSE);

    }

       createMenu();

    createMenu方法用来添加上面边框上的菜单项。

       //增加绘制界面

       addDrawPanel();

在addDrawPanel方法中实现画板的功能，画图就在此面板中进行。

//增加工具栏

       addToolsPanel();

工具栏是用来添加功能按钮的部分，比如画笔,刷子，以及各种形状的功能。

       //增加颜色选择面板

       addColorPanel();

颜色面板部分用来给用户选择颜色使用，可以实现颜色的变化。

       //设置可见

       setVisible(true);

       //给绘制面板增加监听

    addListener();

监听部分实现画板以及各个功能的监听。

依次添加方法后；创建各自的类和对象。给这些面板添加边框布局。

添加完基本的功能按钮和颜色按钮部分之后的界面如下

2.    完成以上的界面之后，紧接着就是功能的实现。

依次完成各个类的功能即可：

（1）首先自然是DrawPanel类的实现：

import java.awt.Color;

import javax.swing.JPanel;

import javax.swing.border.LineBorder;

publicclassDrawPanelextends JPanel{

    MainFramemainFrame;

    public DrawPanel(MainFramemainFrame)

    {

       this.mainFrame = mainFrame;

       //设置背景颜色

       setBackground(Color.WHITE);

       //创建颜色

       Colorcolor=new Color(171,171,171);

       //创建线条边框

       LineBorderlineBorder=new LineBorder(color ,3);

       //设置边框

       setBorder(lineBorder);

    }

}

DrawPanel类主要完成绘画部分的大小以及背景色的设置。

（2）实现ToolsPanel类的方法，此方法包括给每个按钮添加名称，并且给每个按钮添加图标，此图标是实现整理好的，拷贝到相应的项目文件夹下即可使用，最后一步给按钮添加监听。（添加按钮时,最好使用按钮组ButtonGroup，从而使得每个按钮可以互斥地使用。代码如下：

publicclassToolsPanel extends JPanel{

 

    String[]allCommand = {"五角星","xz","橡皮","喷漆","吸管","放大镜","铅笔","刷子","喷筒","文字","直线","曲线","矩形","多边形","椭圆","圆角矩形"};

   

    MainFramemainFrame;

    public ToolsPanel(MainFramemainFrame)

    {

       this.mainFrame = mainFrame;

       setPreferredSize(new Dimension(60,0));

       setBackground(newColor(240,240,240));

       setLayout(newFlowLayout(FlowLayout.CENTER,0,0));

       //创建一个往上凸起的边框

       BevelBorderborder =new BevelBorder(BevelBorder.RAISED,new Color(240,240,240),newColor(160,160,160));

       setBorder(border);

       //创建一个按钮组，使得所有按钮能够互斥

       ButtonGroupgg =new ButtonGroup();

       for (inti = 1; i <=allCommand.length;i++) {

           //创建四张图标

           ImageIconi1 =new ImageIcon("img/"+i+"-1.png");

           ImageIconi2 =new ImageIcon("img/"+i+"-2.png");

           ImageIconi3 =new ImageIcon("img/"+i+"-3.png");

           ImageIconi4 =new ImageIcon("img/"+i+"-4.png");

           //创建单选按钮

           JRadioButtonjrb =newJRadioButton();

           //设置了一个ActionCommand

           jrb.setActionCommand(allCommand[i-1]);

      

           if(allCommand[i-1].equals("qb"))

           {

              jrb.setSelected(true);

           }

           //设置轻量级组建的大小

           jrb.setPreferredSize(new Dimension(25,25));

           //设置按钮四种状态下的图标

           jrb.setIcon(i1);

           jrb.setRolloverIcon(i2);

           jrb.setPressedIcon(i3);

           jrb.setSelectedIcon(i4);

          

           jrb.setMargin(new Insets(0, -2,0, 0));

           //给按钮增加监听

           jrb.addActionListener(new ToolsActionListener(mainFrame));

           add(jrb);

           gg.add(jrb);

       }  

    }

（3）实现ToolsPanel之后，自然要实现它的监听类ToolsActionListener，此类主要是获取鼠标所点击的按钮的名称然后交由setsTool方法，以便于之后根据按钮名称完成相应的功能。

publicclass ToolsActionListenerimplements ActionListener {

    MainFramemainFrame;

    public ToolsActionListener(MainFramemainFrame) {

       this.mainFrame = mainFrame;

    }

    @Override

    publicvoid actionPerformed(ActionEvente) {

       System.out.println(e.getActionCommand());

       StringactionCommand =e.getActionCommand();

       mainFrame.setsTool(actionCommand);

      

    }

}

(4)接下来实现颜色面板ColorPanel的部分，跟功能部分按钮基本相同，只是将其图标换成了各种颜色。

（5）完成colorpanel之后，跟功能部分一样，实现监听部分ColorActionListener，并用setTcColor方法传回所点击的颜色，便于绘画是使用。

（6）最后一步同时也是最重要的一步。在DrawMouseListener类中实现绘画功能和颜色调用。此类实现MouseListener,MouseMotionListener接口主要用来监听鼠标的各种操作。然后根据之前的ColorActionListener和ToolsActionListener类中传回的功能按钮和颜色来实现具体的功能，并用相应颜色的画笔。由于代码过长所以只展示部分功能的代码：

publicvoid mouseReleased(MouseEvente) {

       //TODO Auto-generated method stub

       StringcTool =mainFrame.getsTool();

       ColorbkColor =mainFrame.getBkColor();

       ColortcColor =mainFrame.getTcColor();

      

       graphics.setColor(bkColor);

       x2 =e.getX();

           y2 =e.getY();

       switch (cTool) {

      

       case"直线":         

           graphics.drawLine(x1,y1,x2,y2);

           break;

       case"矩形":

          

           graphics.setColor(bkColor);

           graphics.drawRect(Math.min(x1,x2),Math.min(y1,y2),Math.abs(x1-x2),Math.abs(y1-y2));

           break;

 

       case"椭圆":

           graphics.setColor(bkColor);

           graphics.drawOval(Math.min(x1,x2),Math.min(y1,y2),Math.abs(x1-x2),Math.abs(y1-y2));

           break;

       case"圆角矩形":

           intx3=Math.min(x1,x2),y3=Math.min(y1,y2),x4=Math.max(x1,x2),y4=Math.max(y1,y2);

           graphics.drawRoundRect(x3,y3,x4-x3,y4-y3,10,10);

       break;

      

       case"多边形":

           if(flag)

           {

              graphics.drawLine(x1,y1,x2,y2);

              x5=x1;

              y5=y1;

              x6=x2;

              y6=y2;

              flag=false;          

           }

           else

           {

              graphics.drawLine(x6,y6,x2,y2);

              x6=x2;

              y6=y2;

           }

           break;

      

       default:

           break;

       }

          

    }

添加完基本的功能按钮和颜色按钮部分之后的界面如下：

 

3.  完成以上的基本功能后，可以尝试添加一些实用的小功能：

 比如，可以撤销的功能。主要是建立一个容器将绘画部分放入容器中，当需要撤销时只要移除最后一步，并重画一下窗体即可；以下为实现撤销的代码：

ShapeContainer

publicclass ShapeContainer {

    //向容器中添加元素的方法

   

    Shape[] all=new Shape[3];

    intsize =0;

   

    publicvoid add(Shapelp)

    {

       if(size ==all.length)

       {

           Shape[] newAll=new Shape[size+3];

           //拷贝之前的老数据

           for(inti=0;i<all.length;i++)

           {

              newAll[i]=all[i];

           }

           //将新数组赋值给all

           all=newAll;

       }

       //往数组中增加

       all[size]=lp;

       size++;

    }

    //从容器中按照下标获取元素的方法

    public Shape get(intindex)

    {

       if(index<size)

       {

           //从数组中获取

           returnall[index];

       }

       returnnull;

    }

    //按照下标从容器中移除元素的方法

    publicvoid remove(intindex)

    {

       //只能替换到倒数第二个

       for(inti=index;i<all.length-1;i++)

       {

          

           all[i]=all[i+1];

       }

    //让最后一个元素为空

       all[size-1]=null;

    size--;

    }

    //获取元素数量的方法

    publicint getSize()

    {

    returnsize;  

    }

    publicvoid removeAll() {

       all =new Shape[3];

       size = 0;

    }

 

}

 

LineShape

 

publicclass LineShapeimplements Shape{

 

    intx1,y1,x2,y2;

    Color bk;

    public LineShape(intx1,inty1,intx2,inty2,Colorbk)

    {

       this.x1=x1;

       this.x2=x2;

       this.y1=y1;

       this.y2=y2;

      

    }

   

    publicvoid draw(Graphicsg)

    {

       g.setColor(bk);

       g.drawLine(x1,y1,x2, y2);

    }

 

}

DrawPanel

publicclassDrawPanelextends JPanel{

    MainFrame mainFrame;

   

    static ShapeContainerls=new ShapeContainer();

    public DrawPanel(MainFramemainFrame)

    {

       this.mainFrame =mainFrame;

       //设置背景颜色

       setBackground(Color.WHITE);

       //创建颜色

       Color color=new Color(171,171,171);

       //创建线条边框

       LineBorder lineBorder=new LineBorder(color ,3);

       //设置边框

       setBorder(lineBorder);

    }

    publicvoid paint(Graphicsg)

    {

       super.paint(g);

       for(inti=0;i<ls.getSize();i++)

       {

           Shape shape=ls.get(i);

           shape.draw(g);

       }

    }

}

DrawMouseListener中部分代码：

publicvoid mouseReleased(MouseEvente) {

       //TODO Auto-generated method stub

       String cTool =mainFrame.getsTool();

       Color bkColor =mainFrame.getBkColor();

       Color tcColor =mainFrame.getTcColor();

      

       graphics.setColor(bkColor);

       x2 =e.getX();

           y2 =e.getY();

       switch (cTool) {

       case"五角星":

           intx3=Math.min(x2,x1),y3=Math.min(y1,y2),x4=Math.max(x1,x2),y4=Math.max(y1,y2);

           WjxShape ws=new WjxShape(x3,y3,x4,y4);

           DrawPanel.ls.add(ws);

           mainFrame.repaint();

          

           break;

       case"直线":  

           x2 =e.getX();

           y2 =e.getY();

           DrawPanel.ls.add(new LineShape(x1,y1,x2, y2,bkColor));

      

           mainFrame.repaint();

          

           break;

       case"矩形":

           x2 =e.getX();

           y2 =e.getY();

          

           RectShape rs =new RectShape(x1,y1,x2, y2,bkColor,tcColor);

           DrawPanel.ls.add(rs);

           mainFrame.repaint();

          

           break;

       case"铅笔":

           PencilShapeps =new PencilShape(sc);

           DrawPanel.ls.add(ps);

          

           mainFrame.repaint();

           break;

       case"橡皮":

           PencilShapexp =new PencilShape(sc);

           DrawPanel.ls.add(xp);

          

           mainFrame.repaint();

           break;

          

       case"刷子":

           SzShape zs=new SzShape(sc);

          

           DrawPanel.ls.add(zs);

           mainFrame.repaint();

           break;

       case"椭圆":

           x2 =e.getX();

           y2 =e.getY();

          

           OvalShape os =new OvalShape(x1,y1,x2, y2,bkColor,tcColor);

           DrawPanel.ls.add(os);

           mainFrame.repaint();

       break;

       case"圆角矩形":

       inta=Math.min(x1,x2),b=Math.min(y1,y2),c=Math.max(x1,x2),d=Math.max(y1,y2);

       YjjxShape ys=new YjjxShape(a,b,c-a,d-b,10,10);

           DrawPanel.ls.add(ys);

           mainFrame.repaint();

           break;

      

       case"多边形":

           if(flag)

           {

              DbxShapeds =new DbxShape(x1,y1,x2, y2);

              DrawPanel.ls.add(ds);

              x5=x1;

              y5=y1;

              x6=x2;

              y6=y2;

              flag=false;          

           }

           else

           {

              DbxShapeds =new DbxShape(x6,y6,x2,y2);

              DrawPanel.ls.add(ds);

//            g.drawLine(x6,y6,x2,y2);

              x6=x2;

               y6=y2;

           }

          

           mainFrame.repaint();

           break;

      

       default:

           break;

       }

          

    }

 

 

 

最终界面如下：