画图板实现和优化总结

最新推荐文章于 2022-09-23 08:45:00 发布

最新推荐文章于 2022-09-23 08:45:00 发布 · 229 阅读

文章标签：

#画图板 #实现 #重绘 #简单

足迹专栏收录该内容

7 篇文章

订阅专栏

画图板实现和优化总结

来蓝杰参加培训的第一个完整意义上但还远不满意的项目——画图板的实现及优化。个人基础较差，技术欠佳，感谢老师和室友的帮助和指导，才使得我这个丑丑的简单画图板最终实现了。

一、简单画图板的初步实现

1、画图板面板的实现

在JFrame上通过RadioButton的轻量级组件实现面板的制作。

public class DrawingPad extends javax.swing.JFrame{
     /**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	//主方法
	public static void main (String[] args){
		DrawingPad dp=new DrawingPad();
	    dp.initDP();
	}
	//初始化窗体Ailse画板1.0的方法
	public void initDP(){
		this.setTitle("AilseDrawingPad1.0");
		this.setSize(600,500);
		this.setDefaultCloseOperation(3);
		//为窗体定义并实例流式布局
		java.awt.FlowLayout fl=new java.awt.FlowLayout();
		this.setLayout(fl);
        //创建一个按钮组
		javax.swing.ButtonGroup group=new javax.swing.ButtonGroup();
		//为窗体定义、实例并添加单选框
        javax.swing.JRadioButton line=new javax.swing.JRadioButton("StrightLine");
		this.add(line);
		javax.swing.JRadioButton rect=new javax.swing.JRadioButton("rect");
		this.add(rect);
		javax.swing.JRadioButton oval=new javax.swing.JRadioButton("oval");
		this.add(oval);
		javax.swing.JRadioButton arcu=new javax.swing.JRadioButton("arcu");
		this.add(arcu);
		javax.swing.JRadioButton rrect=new javax.swing.JRadioButton("rrect");
		this.add(rrect);
		javax.swing.JRadioButton arcd=new javax.swing.JRadioButton("arcd");
		this.add(arcd);
		//设置单选框动作命令
		line.setActionCommand("line");		
		rect.setActionCommand("rect");
        oval.setActionCommand("oval");
        arcu.setActionCommand("arcu");
        rrect.setActionCommand("rrect");
        arcd.setActionCommand("arcd");

2、画图板鼠标监听

面板准备好后，我们需要考虑画在什么地方和怎么画的问题。设置以整个窗体为画布，和通过对鼠标动作的监听来控制画出图形。通过两点坐标来实现画直线，画矩形，椭圆等功能。

画板中要添加入监听器：

  //创建并定义一个画布,窗体在屏幕中所占区域为画布
        java.awt.Graphics g=this.getGraphics(); 
        
      //创建并实例一个鼠标监听对象
    	DPMouseListener dpml=new DPMouseListener(g,group);
    	this.addMouseListener(dpml);

监听器：

package DrawingPad;

import java.awt.event.MouseEvent;

public class DPMouseListener implements java.awt.event.MouseListener{
	private int x1,x2,y1,y2; 
	private String kind;
	private java.awt.Graphics g;
	private javax.swing.ButtonGroup group;
	
	public DPMouseListener(java.awt.Graphics g,javax.swing.ButtonGroup group){
		this.g=g;
		this.group=group;
	}
	
	/**
     * 单击鼠标（在同一地方按下和释放鼠标）
     */
    public void mouseClicked(MouseEvent e){
    	//System.out.println("mouseClicked");
    }

    /**
     * 按下鼠标
     */
    public void mousePressed(MouseEvent e){
    	System.out.println("mousePressed");
    	//设置默认选项
    	
    	//判断所选图形并选所对应命令
    	kind=group.getSelection().getActionCommand();
    	System.out.println("选择的图形是："+kind);
    	x1=e.getX();
    	y1=e.getY();
    }

    /**
     *释放鼠标
     */
    public void mouseReleased(MouseEvent e){
    	System.out.println("mouseReleased");
        x2=e.getX();
        y2=e.getY();
        if("line".equals(kind)){
        	g.drawLine(x1, y1, x2, y2);
        }
        else if("rect".equals(kind)){
        	g.drawRect((x1<x2?x1:x2), (y1<y2?y1:y2), Math.abs(x1-x2),Math.abs(y1-y2));
        }
        else if("oval".equals(kind)){
        	g.drawOval((x1<x2?x1:x2), (y1<y2?y1:y2), Math.abs(x1-x2), Math.abs(y1-y2));
        }
        else if("arcu".equals(kind)){
        	g.drawArc((x1<x2?x1:x2), (y1<y2?y1:y2), Math.abs(x1-x2), Math.abs(y1-y2),0,-180);
        }
        else if("rrect".equals(kind)){
        	g.drawRoundRect((x1<x2?x1:x2), (y1<y2?y1:y2), Math.abs(x1-x2), Math.abs(y1-y2), 35, 35);
        }
        else if("arcd".equals(kind)){
        	g.drawArc((x1<x2?x1:x2), (y1<y2?y1:y2), Math.abs(x1-x2), Math.abs(y1-y2),0,180);
        }
    }

在画的过程当中，遇到许多问题：

1）矩形等只能从左上角向右下角画。

通过观察发现，无论我怎么画，画出的矩形都是以鼠标点下时所获得的点的坐标作为矩形的左上定点。而且，正常情况下，我们所画出的矩形的特点是左上的定点x坐标总是所有点中最小的，而y坐标也是一样。结合以上两点，首先想到了通过两次比较x坐标和y坐标就可以解决。后来向室友学习，发现在学习c时使用的问号表达式在java中同样可以使用，且完全可以替代两次比较。代码见上图。

2）arc函数画弧线

初始时，只实现了直线、矩形、和椭圆功能，在拓展功能时，发现了arc函数。查询jdk API后知道其前四个参数和矩形的是类似的，只是后两个参数中，前一个是初始角度，而后一个是转过的角度，所画的圆弧就是以这两个角度之间的弧。考虑我想画个笑脸娃娃，so就定义了+/-180度的转角，得到了开口向上的弧（转角=-180°）和开口向下的弧（转角=180°）。同理，应该可以实现特殊角度弧线的绘制。

二、简单画图板的重绘

所谓重绘就是，我最小化我的面板后，不至于因为内存中没有留下而丢失了。就是将画的形状保存在内存中，然后在最小化或拖出屏幕后，再取出这些形状。想起了学的c中的动态数组，龙哥说java中有一种数据结构叫队列，原理很像动态数组。画画总是需要颜色的，而颜色和绘制形状时的两点坐标不是同一种数据类型，就要定义两个队列来存储了。于是，我们采用了顶层类（貌似是叫这个）——shape形状抽象类，将两点坐标和颜色定为形状抽象类的属性，要求所有的形状类都要继承该类。然后把所绘制的形状以形状抽象类的对象的形式存储入内存。

鼠标监听器：
 public void mouseReleased(MouseEvent e){
    	System.out.println("mouseReleased");
        x2=e.getX();
        y2=e.getY();
        
        shapes sh=null;
        if("line".equals(kind)){
        	//创建直线对象
        	sh=new Line(x1, y1, x2, y2,color);
        	
        }
        else if("rect".equals(kind)){
        	sh=new rect(x1,x2,y1,y2,color);
        }
        else if("oval".equals(kind)){
        	sh=new oval(x1,y1,x2,y2,color);
        }
        else if("arcu".equals(kind)){
        	sh=new arcu(x1,y1,x2,y2,color);
        }
        else if("rrect".equals(kind)){
        	sh=new rrect(x1,y1,x2,y2,color);
        }
        else if("arcd".equals(kind)){
        	sh=new arcd(x1,y1,x2,y2,color);
        }
    
        //绘制形状
        sh.draw(g);
        //保存形状
        shape.add(sh);
        
    }

    形状抽象类：
package REDrawingPad;

import java.awt.Color;
import java.awt.Graphics;
/**
 * 形状抽象类，所有的形状类都必须继承该类
 *
 */ 
public abstract class shapes {
    int x1,x2,y1,y2;
    Color color;
    //绘制形状的方法
    public abstract void draw(Graphics g) ;
}

直线形状类：

package REDrawingPad;

import java.awt.Color;
import java.awt.Graphics;
/**
* 形状抽象类，所有的形状类都必须继承该类
*
*/
public abstract class shapes {
    int x1,x2,y1,y2;
    Color color;
    //绘制形状的方法
    public abstract void draw(Graphics g) ;
}
面板：

//重写父类中窗体绘制方法
    public void paint(Graphics g){
        //调用父类的方法，绘制窗体
        super.paint(g);
        //调用绘制形状的方法
        redraw(this.g);
    }
    //重新绘制形状的方法
    public void redraw(Graphics g){
        //遍历队列
        for(int i=0;i<sh.size();i++){
            //取出形状
            shapes shape=sh.get(i);
            //绘制
            shape.draw(g);
        }
    }
}