• 热门专题

画图面板设计感想

作者:  发布日期:2016-07-08 22:04:36
Tag标签:感想  面板  
  • 一、画板设计的基本思想

    画板设计主要采用的是面向对象的设计方法,下面我们就一起探讨一下怎样用面向对象的方法来具体实现画板的设计。首先我们要弄清楚一个完整的画板需要哪些具体的功能,并根据这些功能在分别对他们进行具体的实现。画板无非就是由工具栏addLeftJpanel()、颜色栏addDownJpanel()、中心画板框addCenterJpanel()三个主要部分组成,其次就是还要有一个菜单框addMenu(),最后我们为了实现这几个框架还需要一个实现它们的方法 Frame();这个方法的作用主要就是调用以上四种框架的方法并实现它们。调用完成后再分别对各个方法的具体功能具体实现,在这个过程中我们需要用到监听器等。下面我说一下画板设计的具体的步骤。

    二、画板设计的具体步骤:

    <一>面板总体框架的设计

    1、创建一个函数DrawBoard 并继承Frame类,在具体的主函数方法中实例化DrawBoard 并调用总的实现方法Frame(),这样整个界面的大体框架就设计出来了,具体代码实现如下:

     

    public class DrawBoard extends JFrame{
    	public Graphics g;
    	public ButtonGroup bg;
    	public static void main(String[] args) {
    		
    		DrawBoard db=new DrawBoard();
    		db.Frame();
    	}
    //实现总方法
    private void Frame() {}
    //中间画板
     public JPanel addCenterJpanel(){}
    //工具栏
     public void addLeftJpanel(){}
    //菜单栏
      public void addMenu(){}
    //颜色栏
    public void addDownJpanel(){}
    }
    2、实现中间画板:在设计画板中间画板时我们首先要弄清楚这个中间面板具体要实现那些功能,比如我们需要设计他的背景颜色和设置它的位置,特别注意在设计它所在的具体位置时我们需要用到边框布局,在接下来的其他面板的设计时也会用到边框布局。那么中间面板除了这些还需要什么功能,画图面板顾名思义就需要画笔所以我们需要构造,但我们构造画笔又不能在中间面板建造,因为画笔必须放在整个窗体的实现之后,所以我们要在总方法Frame中具体实现。这些都完成后那么我们的中间面板的设计也就完成的差不多了:
    <pre name="code" class="java">          //中间面板
              public JPanel addCenterJpanel(){
            	  JPanel  JPanelCenter=new JPanel();
                      //设计背景颜色
            	  JPanelCenter.setBackground(Color.white);
                      //设计中间面板的位置
            	  add(JPanelCenter,BorderLayout.CENTER);
            	  return JPanelCenter;
            	
              }
    3、实现工具栏:和中间面板一样工具要实现它的背景颜色的设计和它的面板大小以及其在边框中的具体位置,那么除了这些最基本的功能之外我们还要完成工具栏中最重要的一项操作:设计16个工具按钮,我们可以通过一个导入包“images”以及用一维数组来实现这16个按钮的形状河大小,那么具体代码实现实现如下:

     

    
    
    <pre name="code" class="java" style="font-family: Arial, Helvetica, sans-serif;font-size:18px;"> //工具栏面板
              public void addLeftJpanel(){
            	  JPanel  JPanelLeft=new JPanel();
            	  //设置各个面板底色,这个颜色是画板底色
        		  JPanelLeft.setBackground(new Color(240,240,240));
        		  //确定他们的具体位置
        		  add(JPanelLeft,BorderLayout.WEST);
        		  //设置边框布局的大小,当左边和下面的空间大小确定后,中间面板的大小也就自动确定好了
        		  Dimension dime1=new Dimension(68,0);
        		  JPanelLeft.setPreferredSize(dime1);
        		  /***********按钮功能的实现*********/
        			 //通过流式布局将工具栏的按钮间隙最小化,即将他们的横向距离最小化
        			  FlowLayout fl=new FlowLayout(FlowLayout.LEFT,0,0);
        			  JPanelLeft.setLayout(fl);
        			  //创建按钮集合,只有创建它了,当你点击这个按钮是它才会执行相应的功能
        			  bg=new ButtonGroup();
        			  //创建数组 
        			
        			  String[] command={"wujiao","xuxing","xiangpi","pentou","diguan","biger","huabi","shuazi",                                            "map","ziti","line","quxian","rect","morerect","Oval","bigoval"};
        			  //用一个for循环将按钮表达出来
        			  for(int i=0;i<16;i++){
        				  
        				  JRadioButton jb1=new JRadioButton();
        				  //导入图片
        				  ImageIcon image1=new ImageIcon("images/draw"+i+".jpg");
        				  ImageIcon image2=new ImageIcon("images/draw"+i+"-1.jpg");
        				  ImageIcon image3=new ImageIcon("images/draw"+i+"-2.jpg");
        				  ImageIcon image4=new ImageIcon("images/draw"+i+"-3.jpg");
        				  jb1.setIcon(image1);
        				  jb1.setRolloverIcon(image2);
        				  jb1.setPressedIcon(image3);
        				  jb1.setSelectedIcon(image4);
        				  //设置命令
        				  jb1.setActionCommand(command[i]);
        				  JPanelLeft.add(jb1);
        				  bg.add(jb1);
        			  }
        		 
              }
    4、实现颜色栏:和上面两个面板一样我们要设置它的总背景色和它的框架的位置及框架大小。这些都完成之后我们要在将24个颜色设置进去,那么要达到和完美产品一样的效果我们该怎么做呢又或者我们该有一个什么样的思路来完成呢。下面我们就来探讨一下具体的实现思路:当我们完成大面板的设计之后,我们可以再在里面添加一个小面板,在这个小面板中在添加大小不一样的两个更小的面板,用来存放24个颜色。特别注意在设计那两个小面板以及在其中一个小面板中放入24个颜色的时候一定要注意用流式布局来消除他们的间隙,那么具体的代码实现就如下:
    <pre name="code" class="java"> //颜色栏面板
              public void addDownJpanel(){
            	  //颜色面板的主体面板
            	  JPanel  JPanelDown=new JPanel();
         		  JPanelDown.setBackground(new Color(240, 240, 240));
        		  add(JPanelDown,BorderLayout.SOUTH);
        		  Dimension dime2=new Dimension(0,70);
        		  JPanelDown.setPreferredSize(dime2);
        		  //在颜色主体面板里在加一个新的面板
        		  JPanel Jpaneliner=new JPanel();
        		 
        		  //设置这个面板的大小
        		  Jpaneliner.setPreferredSize(new Dimension(420, 60));
        		  Jpaneliner.setBackground(Color.RED);
        		 JPanelDown.add(Jpaneliner);
        		
        		 
        		 //在上一个面板中再放两个小面板
        		 JPanel Jpanelleft=new JPanel();
        		 JPanel Jpanelright=new JPanel();
        		 //第一个面板即左面板的背景色及大小
        		 Jpanelleft.setBackground(new Color(240, 240, 240));
        		 Jpanelleft.setPreferredSize(new Dimension(60,60));
        		 //第二面板即右边面板的背景色和大小
        		 Jpanelright.setBackground(Color.blue);
        		 Jpanelright.setPreferredSize(new Dimension(360, 60));
        		 Jpaneliner.add(Jpanelleft);
        		 Jpaneliner.add(Jpanelright);
        		 //减小他们之间的间隙
        		 Jpaneliner.setLayout(new FlowLayout(FlowLayout.LEFT,0,0));
        			   
        		/**********画板颜色的实现*********/
        		  Color[]  color={Color.red,Color.orange,Color.yellow,Color.green,
        				          Color.blue,Color.black,Color.RED,Color.ORANGE,
        				          Color.YELLOW,Color.GREEN,Color.BLUE,Color.BLACK,
        				          Color.red,Color.orange,Color.yellow,Color.green,
        				          Color.blue,Color.black,Color.RED,Color.ORANGE,
        				          Color.YELLOW,Color.GREEN,Color.BLUE,Color.BLACK};
        		 //设置颜色按钮的监听
        		   PointListener action=new PointListener(this);
        		  for(int i=0;i<24;i++)
        		  {
        			  //this即指DrawBoard,设置按钮
        			  JButton jb=new JButton();
        			  //设置按钮大小
        			  Dimension dime=new Dimension(30, 30);
        			  jb.setPreferredSize(dime);
        			  //给各个按钮配上相应的颜色
        			  jb.setBackground(color[i]);
        			  jb.addActionListener(action);
        			  Jpanelright.add(jb);
        			  //消除右边小面板各个按钮之间的间隙
        			  Jpanelright.setLayout(new FlowLayout(FlowLayout.LEFT,0,0));
        			  jb.setBorder(new BevelBorder(1,Color.WHITE,Color.gray));
        		    }
        		     //绝对布局方式
        			//把添加的容器布局设置为null
        		     Jpanelleft.setLayout(null);
        		      //完成颜色板左边的框架
        		     JButton jb1=new JButton();
        		     JButton jb2=new JButton();
        		     
        		     //设置第一个小面板按钮的定位坐标
        		     jb1.setBounds(10,10,30,30);
        		     jb2.setBounds(20, 20, 30, 30);
        		     //设置小面板按钮的颜色
        		     jb1.setBackground(Color.BLUE);
        		     jb2.setBackground(Color.WHITE);
        		     //设置按钮的凹凸形状,使按钮更具质感
        		     jb1.setBorder(new BevelBorder(1,Color.WHITE,Color.gray));
        		     jb2.setBorder(new BevelBorder(0,Color.WHITE,Color.gray));
        		     
        		     //设置功能不可用
        		     jb1.setEnabled(false);
        		     jb2.setEnabled(false);
        		     
        		     Jpanelleft.add(jb1);
        		     Jpanelleft.add(jb2);
        		    
              }
    5、菜单栏的实现:菜单栏的位置背景色都是默认的在框架的最上面故我们不需再重复这些操作,只需要实现我们具体想要的功能即可,我们直接看代码吧,具体的功能实现可以看注释:
    //建立菜单栏
    public void addMenu(){
    //添加菜单条
    JMenuBar jmb=new JMenuBar();
    //菜单栏自动置顶
    this.setJMenuBar(jmb);
    //添加菜单,并将其加入到菜单条中去
    JMenu jm1=new JMenu("文件");
    JMenu jm2=new JMenu("编辑");
    JMenu jm3=new JMenu("绘制");
    jmb.add(jm1);
    jmb.add(jm2);
    jmb.add(jm3);
    //添加菜单项,就是将每一个菜单的具体功能体现出来
    JMenuItem jb1=new JMenuItem("新建");
    JMenuItem jb2=new JMenuItem("保存");
    jm1.add(jb1);
    jm1.add(jb2);
    JMenuItem jd1=new JMenuItem("删除");
    JMenuItem jk2=new JMenuItem("撤销");
    jm2.add(jd1);
    jm2.add(jk2);
    }
    6、总的方法的实现:这个就是设计整个项目的基本功能以及调用实现前面那几个模板的作用,在这里我们要重点说一下这里的创建画笔的功能,为甚摸创建画笔要在这个主方法里面创建而不在中间面板那儿创建,因为如果在中间面板创建画板,那么等一下调用中间面板时,画笔一定会出现在整个窗体实现之前,如果这样画笔就失去了它基本的意义。下面我们用代码来说话把,大家请注意注释,每一个注释都说明该语句的作用了:
    
    
    <pre name="code" class="java" style="font-size:18px;">private void Frame() {
    		  //设置全局画笔
    		  setTitle("画板");
    		  //注意:  setSize只用于实现整个窗口的大小,至于边框布局的大小需要用到setPreferredSize
    		 setSize(600,600);
    		  //固定窗体大小
    		 setResizable(false);
    		  //结束进程
    		  setDefaultCloseOperation(3);
    		  //使整个窗体居中
    		  setLocationRelativeTo(null);
    		  //边框布局,分为若干个边框,下面我们需要三个边框
    		  BorderLayout bl=new BorderLayout();
    		  setLayout(bl);
    		 
    		 
    		  //重点,掌握这个调用方法,因为画笔和监听一定要放在setVisible(true);的后面,所以要来这么一下
    		  JPanel JPanelCenter=addCenterJpanel();
    		  addLeftJpanel();
    		  addDownJpanel();
    		  addMenu();
    		  //整个窗体的具体实现
    		  setVisible(true);
    		  //构造画笔,切记 Graphics的构造不能放在窗体的实现之前,否则会显示为空
    		     g=JPanelCenter.getGraphics();
    		  //构造监听器
    		     MyListener mouse=new MyListener(g,bg);
    		  //将监听器加到主面板上去
    		    JPanelCenter.addMouseListener(mouse);
    		  //将鼠标移动监听器加到主板上去
    		    JPanelCenter.addMouseMotionListener(mouse);
    		}
    <二>画板工具栏按钮与颜色栏按钮的具体实现
    
    
    1、基本思想:完成各个按钮的基本功能我们需要用到画笔以及鼠标监听器,而这两个步骤我们先前以经在总方法Frame中创建了,在鼠标监听器中我们首先要做的就是在相应的方法中实现按钮应做的操作,但话虽如此我还是要先将该定义的变量定义好,具体代码如下:
    <pre name="code" class="java">public  class MyListener implements MouseListener,MouseMotionListener{
    
    	//重构MyListener,以下都是全局变量,数据转换,这个数据转换很重要
    		 public Graphics2D g1;
    		 public int x1,x2,y1,y2,x3,y3,x4,y4;
    		 public String command;
    		 public ButtonGroup bg1;
    		 public Boolean bool=true;
    		
    		public MyListener(Graphics g, ButtonGroup bg){
    			 g1=(Graphics2D)g;
    			 bg1=bg;
    		
    		}
    
    2、下面我们就举几个工具栏按钮功能实现的例子
    
    
    (1)直线的实现:直线就是两个任意点之间的相连,故只需知道两点的坐标即可,其中"line"是直线的指令,在上面的工具栏方法中已经设定了
    <pre name="code" class="java">//按下
    		public void mousePressed(MouseEvent e) {
    			//确定初始点的坐标
    			 x1=e.getX();
    			 y1=e.getY();
    			 //建立按钮模块以实现他们相应的命令功能
    			  ButtonModel bm=bg1.getSelection();
    			    //获取命令
    			 command=bm.getActionCommand();
    			 
    		}
    	//释放
    		
    		public void mouseReleased(MouseEvent e) {
    			//确定释放点的坐标
    			 x2=e.getX();
    			 y2=e.getY();
    			 //画直线,每一个模块都完成相应的功能
    			 if("line".equals(command)){
    		       g1.drawLine(x1, y1, x2, y2);
    				
    	}
    (2)矩形的实现:和直线类似,只需要调用drawLine就行了
    
    
    <pre name="code" class="java"> //画矩形
    			 else if("rect".equals(command)){
    			 //画矩形的第一种方法
    			//int  width=Math.abs(x1-x2);
    			//int  height=Math.abs(y1-y2);
    			//int  x=Math.min(x1, x2);
    			//int  y=Math.min(y1,y2); 
    			//g1.drawRect(x, y, width, height);
    			 //画矩形的第二种方法
    			 g1.drawLine(x1, y1, x1, y2);
    			 g1.drawLine(x1, y1, x2, y1);
    			 g1.drawLine(x1, y2, x2, y2);
    			 g1.drawLine(x2, y1, x2, y2);
    			 
    			 }
    
    (3)椭圆的实现:用代码说话吧
    <pre name="code" class="java" style="font-family: Arial, Helvetica, sans-serif;">       else if("Oval".equals(command)){<pre name="code" class="java">		     g1.drawOval(Math.min(x1,x2), Math.min(y1,y2),Math.abs(x2-x1) ,Math.abs(y2-y1));
    		    
    			 }
    (4)下面我们重点说一下多边形的实现,多边形的实现就是若干的直线的集合,特别注意的是多边形结束时的实现,需要双击才能连上收尾两点,下面让我们看看到底是怎样的:
    <pre name="code" class="java">  else if("morerect".equals(command)){
    		    	 if(bool){
    		    		 g1.drawLine(x1, y1, x2, y2);
    		    		 bool=false;
    		    		 x4=x1;
    			    	 y4=y1;
    		    	 }
    		    	
    		    	 else {
    		    	g1.drawLine(x3, y3, x2, y2);}
    		    	x3=x2;
    		    	y3=y2;
    		    	
    					
    					
    		     }
    		}
    3.我们来看一下颜色怎么实现:颜色的调用很简单,只需要ActionListener监听器即可:
    
    
    <pre name="code" class="java">package 画图面板;
    
    import java.awt.Color;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    
    import javax.swing.JButton;
    
    public class PointListener implements ActionListener{
    	public DrawBoard db1;
    	//重构函数
    	public PointListener(DrawBoard db) {
    		db1=db;
    	}@Override
    	public void actionPerformed(ActionEvent e) 
    	{
    		 //获取源头
    		  Object obj=e.getSource();
    		  //强制转型
    		  JButton jb=(JButton)obj;
    		 //定义颜色
    		  Color color=jb.getBackground();
    		  //获得背景颜色
    		  db1.g.setColor(color);
    	}
    
    }
             至于其它按钮工具功能的实现,小伙伴们可以通过理解我上面的按钮实现来对其它按钮记性功能实现与优化。
    三、项目总结与感想
         
    	 总的来说,通过这次项目的设计,我对面向对象的编程有了一个基本的认知。在画板设计的过程我学习到了很多基本的框架设计所需掌握的基本知识,明白了边框布局的具体作用以及流式布局的基本功能,掌握了Java编程的一些基本语法知识,虽然还做不到烂熟于心,但我相信我一定会熟能生巧。
    		  

     

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规