基于java-applet的简单流程图绘制小工具的制作

作为IT行业中的一员，相信很多人都接触过流程图。在一个软件的开发过程中，无论是前期的需求分析、系统设计，还是后面具体的程序设

计都涉及到流程图的绘制，跟单调的文字说明相比，它以更直观的方式把整个系统呈现在用户面前。通常，我们都是使用软件开发商已经开发

出来的流程图制作软件来绘制流程图，不知各位有没有自己制作过流程图绘制工具呢？这里说说基于java-applet的流程图制作小工具的制作，

希望对大家学习有帮助。另外，在阅读本文档代码的时候，如有发现不妥当的地方，欢迎指正，谢谢！

//**************

一、整体框架设计

import javax.swing.*;

import java.awt.*;

import java.awt.image.*;

import java.awt.event.*;

import java.applet.*;

import java.util.*;//装载代码编写过程中需要用到的api-package

public class applet7 extends Applet {

//定义一些需要使用到的变量

int count=6;//装载的图片数量

Vector v=new Vector();//储存绘图信息

Image[] img=new Image[count];//把图片存入Image数组

int myWidth=0,myHeight=0;//箭头起点坐标

int widthcount=0;//工具栏上图标之间隔

int startX=0,startY=0,endX=0,endY=0;//绘制图标间连线的起点和终点坐标

Canvas startObj=null,endObj=null;//起点和终点动态图标

String drawclear="";//是否绘制连线及指向箭头

int clickX=0,clickY=0,moveX=0,moveY=0;//分别是点击和拖动动态图标时的坐标

canvas[] can=null;//动态图标数组

myCanvas[] mycan=new myCanvas[count];//工具栏图标数组

Canvas curcan=null;//当前获得焦点的图标

Canvas curdelcan=null;//需要删除的当前图标

Image curimg=null;//当前焦点图标的图象

JPanel jp=new JPanel(null);//工具栏

myCanvas drawLine=new myCanvas("drawLine");//用工具栏图标类myCanvas的文字构造器构造的线型图标

MediaTracker mt=new MediaTracker(this);//媒体对象，用于装载图象到内存

public void init() {

img[0]=this.getImage(this.getCodeBase(),"1.gif");//获取图象

img[1]=this.getImage(this.getCodeBase(),"2.gif");

img[2]=this.getImage(this.getCodeBase(),"1.jpg");

img[3]=this.getImage(this.getCodeBase(),"2.jpg");

img[4]=this.getImage(this.getCodeBase(),"3.jpg");

img[5]=this.getImage(this.getCodeBase(),"4.jpg");

this.resize(800,600);//设置applet的尺寸，在浏览器里浏览根据html代码来设置

this.setLayout(null);//设置布局管理器，因为要移动图标的位置，因此设置为null

for(int i=0;i<img.length;i++)

mt.addImage(img[i], 0);

try {

mt.waitForAll();

} catch(Exception ex) {System.err.println(ex.toString());}//装载图标到内存

}

简单的流程图绘制工具至少包括工具栏和绘制区

二、工具栏和动态图标，在基类内部建立内部类

通常包括图标和连线

1、这里采用继承Canvas类，构造图标和线型工具

class myCanvas extends Canvas {

Image im=null;

String str="";

public myCanvas(String s) {//文字构造器

super();

this.str=s;

}

public myCanvas(Image im) {//图象构造器

super();

this.setCursor(new Cursor(Cursor.HAND_CURSOR));//设置鼠标悬浮时的样式，这里为手型

this.im=im;

}

public void paint(Graphics g) {

if(str.equals(""))

g.drawImage(im,0,0,this);//画图，工具图标

else {

g.drawString(str,20,getHeight()/2);//文字，线型

}

2、在主区域绘制工具栏

在init()成员体内加入如下代码：

public void init() {

…………

this.add(jp);//添加工具栏

jp.setBounds(0,0,800,80);//放置工具栏

jp.add(this.drawLine);//往工具栏上添加线型图标

jp.setBackground(new Color(230,230,230));//设置线形图标背景

drawLine.setBounds(5,5,90,30);//放置线形图标

for(int i=0;i<img.length;i++) {//循环往工具栏上放置所有图标

mycan[i]=new myCanvas(img[i]);

width[i]=img[i].getWidth(this);

height[i]=img[i].getHeight(this);

jp.add(mycan[i]);

mycan[i].setBounds(100+5*(i+1)+widthcount,5,img[i].getWidth(this),img[i].getHeight(this));

widthcount+=img[i].getWidth(this);

}

3、动态图标绘制，同样的，继承Canvas类，以方便响应鼠标拖动事件

class canvas extends Canvas {

Image im=null;

public canvas(Image im) {//类体图形构造器

super();

this.setCursor(new Cursor(Cursor.MOVE_CURSOR));//设置鼠标悬浮样式，设立为移动形态

this.im=im;

}

public void paint(Graphics g) {//画出图标

g.drawImage(im,0,0,this);

}

三、注册事件侦听器

1、图标工具栏上的图标侦听鼠标事件，以获取图标从而在绘制区放置图标，修改class myCanvas的类体图形构造器：

public myCanvas(Image im) {

super();

this.setCursor(new Cursor(Cursor.HAND_CURSOR));

this.im=im;

this.addMouseListener(new MouseAdapter() {//注册鼠标按键按下事件，用于获取需要绘制的图标对象

public void mousePressed(MouseEvent e) {

clickmyCanvas(e);

}

});

}

2、在主类的init成员中侦听线型图标的点击事件和绘图区的鼠标点击事件，修改init方法如下：

public void init() {

……………………

drawLine.addMouseListener(new MouseAdapter() {//用于绘制图标之间的线段

public void mousePressed(MouseEvent e) {

clickdrawLine(e);

}

});

this.addMouseListener(new MouseAdapter() {//用于放置动态图标

public void mouseClicked(MouseEvent e) {

clickhere(e);

}

});

}

3、给动态图标侦听如下事件：

public canvas(Image im) {

…………

this.addMouseListener(new MouseAdapter() {//鼠标按键按下事件，得到当前对象，可进行移动或删除对象的操作

public void mousePressed(MouseEvent e) {

clickcanvas(e);

}

});

this.addKeyListener(new KeyAdapter() {//键盘按键按下事件，删除图标对象

public void keyPressed(KeyEvent e) {

if(e.getKeyCode()==KeyEvent.VK_DELETE)

removecanvas(e);

}

});

this.addMouseMotionListener(new MouseMotionAdapter() {//鼠标拖动事件，移动动态图标

public void mouseDragged(MouseEvent e) {

movecanvas(e);

}

});

}

四、给事件编写代码：

1、工具栏

public void clickmyCanvas(MouseEvent e) {

((applet7)this.getParent().getParent()).drawLine.setBackground(null);//恢复线形图标的默认背景

((applet7)this.getParent().getParent()).drawclear="";//让线形图标初始化

((applet7)this.getParent().getParent()).startObj=null;//初始化绘制线段的开始对象

((applet7)this.getParent().getParent()).endObj=null;//初始化绘制线段的结束对象

curcan=(Canvas)e.getSource();//获取当前图标对象

curimg=(Image)im;//获取当前图标对象的图象

}

2、绘图区

public void clickhere(MouseEvent e) {

if(this.curcan==null)return;

if(e.getModifiers()==MouseEvent.BUTTON3_MASK) {//往绘图区添加动态图标，位置在鼠标点击时的坐标点

Canvas ca=new canvas(curimg);

this.add(ca);

ca.setBounds(e.getX(),e.getY(),curimg.getWidth(this),curimg.getHeight(this));

this.validate();

}

public void clickdrawLine(MouseEvent e) {

if(drawLine.getBackground().equals(new Color(230,230,255))) {//可以绘制线段

drawLine.setBackground(new Color(230,230,230));

startObj=null;

endObj=null;

drawclear="";

} else {//不可绘制线段

drawLine.setBackground(new Color(230,230,255));

drawclear="draw";

}

3、动态图标

public void movecanvas(MouseEvent e) {//在两个图标之间绘制线段的同时储存这两个图标以及线段的信息

Canvas mcan=(Canvas)e.getSource();

int mtop=mcan.getY(),mleft=mcan.getX(),mwidth=mcan.getWidth(),mheight=mcan.getHeight();

mcan.setBounds(mleft+e.getX()-clickX,mtop+e.getY()-clickY,mwidth,mheight);

for(int i=0;i<v.size();i++) {

Vector v1=(Vector)v.elementAt(i);

if(((Canvas[])v1.elementAt(0))[0].equals(mcan)) {

((int[])v1.elementAt(1))[0]=mcan.getX();

((int[])v1.elementAt(1))[1]=mcan.getY();

((int[])v1.elementAt(1))[2]=mcan.getWidth();

((int[])v1.elementAt(1))[3]=mcan.getHeight();

} else if(((Canvas[])v1.elementAt(0))[1].equals(mcan)) {

((int[])v1.elementAt(1))[4]=mcan.getX();

((int[])v1.elementAt(1))[5]=mcan.getY();

((int[])v1.elementAt(1))[6]=mcan.getWidth();

((int[])v1.elementAt(1))[7]=mcan.getHeight();

}

((applet7)this.getParent()).repaint();

}

public void removecanvas(KeyEvent e) {//移除图标以及相关连的线段

try {

Canvas mcan=(Canvas)e.getSource();

((applet7)this.getParent()).remove(curdelcan);

for(int i=v.size()-1;i>=0;i--) {

Vector v1 = (Vector) v.elementAt(i);

if(((Canvas[])v1.elementAt(0))[0].equals(mcan)||((Canvas[])v1.elementAt(0))[1].equals(mcan))

v.removeElementAt(i);

}

((applet7)this.getParent()).validate();

((applet7)this.getParent()).repaint();

}catch(NullPointerException ex){return;}

}

public void clickcanvas(MouseEvent e) {//鼠标拖动图标是改变对象位置以及对象相关连线

curdelcan=(Canvas)e.getSource();

clickX=e.getX();

clickY=e.getY();

((applet7)this.getParent()).repaint();

if(((applet7)this.getParent()).drawclear.equals(""))return;

if(((applet7)this.getParent()).startObj==null&&((applet7)this.getParent()).endObj==null)

((applet7)this.getParent()).startObj=(Canvas)e.getSource();

else if(((applet7)this.getParent()).startObj!=null&&((applet7)this.getParent()).endObj==null&&((applet7)this.getParent

()).startObj!=(Canvas)e.getSource()) {

((applet7)this.getParent()).endObj=(Canvas)e.getSource();

Vector v1=new Vector();

v1.addElement(new Canvas[]{startObj,endObj});

v1.addElement(new int[]{startObj.getX(),startObj.getY(),startObj.getWidth(),startObj.getHeight(),endObj.getX

(),endObj.getY(),endObj.getWidth(),endObj.getHeight()});

v.addElement(v1);

((applet7)this.getParent()).drawclear="";

((applet7)this.getParent()).drawLine.setBackground(null);

((applet7)this.getParent()).startObj=null;

((applet7)this.getParent()).endObj=null;

}

五、在绘图区绘图

public void paint(Graphics g) {//绘制线段

for(int i=0;i<v.size();i++) {

Vector v1=(Vector)v.elementAt(i);

startX = ((int[])v1.elementAt(1))[0] + ((int[])v1.elementAt(1))[2] / 2;

startY = ((int[])v1.elementAt(1))[1] + ((int[])v1.elementAt(1))[3] / 2;

endX = ((int[])v1.elementAt(1))[4] + ((int[])v1.elementAt(1))[6] / 2;

endY = ((int[])v1.elementAt(1))[5] + ((int[])v1.elementAt(1))[7] / 2;

g.drawLine(startX, startY, endX, endY);

drawArrowhead(g,((Canvas[])v1.elementAt(0))[0],((Canvas[])v1.elementAt(0))[1]);//调用函数绘制箭头

}

public void drawArrowhead(Graphics g,Canvas startObj,Canvas endObj) {//绘制箭头

double xx=0,yy=0,xx1=0,yy1=0,xx2=0,yy2=0;

myWidth=myHeight=(int)Math.pow((double)(Math.pow(endObj.getWidth(),2d)+Math.pow(endObj.getHeight(),2d)),1/2d)/2;

xx=endX-(endX-startX)*myWidth/Math.pow((double)(endX-startX)*(endX-startX)+(double)(endY-startY)*(endY-startY),1/2d);

yy=endY-(endY-startY)*myHeight/(Math.pow((double)(endX-startX)*(endX-startX)+(double)(endY-startY)*(endY-startY),1/2d));

xx1=xx-20*Math.cos(Math.atan(((double)yy-startY)/((double)xx-startX))-radians(30));

yy1=yy-20*Math.sin(Math.atan(((double)yy-startY)/((double)xx-startX))-radians(30));

xx2=xx-20*Math.sin(radians(60)-Math.atan(((double)(yy-startY))/((double)(xx-startX))));

yy2=yy-20*Math.cos(radians(60)-Math.atan(((double)(yy-startY))/((double)(xx-startX))));

if(startObj.getX()+startObj.getWidth()/2>endObj.getX()+endObj.getWidth()/2) {

xx1=xx+20*Math.cos(Math.atan(((double)yy-startY)/((double)xx-startX))-radians(30));

yy1=yy+20*Math.sin(Math.atan(((double)yy-startY)/((double)xx-startX))-radians(30));

xx2=xx+20*Math.sin(radians(60)-Math.atan(((double)(yy-startY))/((double)(xx-startX))));

yy2=yy+20*Math.cos(radians(60)-Math.atan(((double)(yy-startY))/((double)(xx-startX))));

}

g.fillPolygon(new int[]{(int)xx2,(int)xx1,(int)xx},new int[]{(int)yy2,(int)yy1,(int)yy},3);

}

public double radians(int degrees) {//该函数用于将角度转化为弧度

return ((double)degrees)*Math.PI/180.0;

}

六、测试说明

编译该applet7.java文件，用appletviewer查看该applet

在主区域的上面有一个写有"drawLine"的线形图标和几个图象图标，将鼠标移到图象图标上，光标变为手形，点击一下，取得需要绘制的图标

，然后移动到绘制区，右键鼠标就可以把选种的图标放置到相应位置；当在主区域内放置的图标超过两个之后，点击工具栏上的drawLine线形

图标，使之变色，然后分别点击主区域里的动态图标A和动态图标B，将会在A和B之间出现一条连线，根据顺序，先被点击的图标指向后被点击

的图标，这里是A-->B，线段绘制完毕之后，线形图标恢复初始状态，必须再点击才能进行图标连线（注：一个图标可同时与多个图标连线）；

把鼠标移动到主区域的动态图标上，光标变为移动形，点击鼠标，获取删除对象，按下键盘上的Delete键，就可以删除刚才选中的图标以及与

它相连的所有线段。

效果图片：

如有不明白的地方可以来信：beyond_xiruo@21cn.com

//***********************************************************************

//* 全部代码 *

//***********************************************************************

import javax.swing.*;

import java.awt.*;

import java.awt.image.*;

import java.awt.event.*;

import java.applet.*;

import java.util.*;

public class applet7 extends Applet {

int count=6;

Vector v=new Vector();

Image[] img=new Image[count];

int myWidth=0,myHeight=0;

int widthcount=0;

boolean[] b=new boolean[count];

int[] width=new int[count],height=new int[count],w=new int[count],h=new int[count],wid=new int[count],hei=new int

[count],ww=new int[count],hh=new int[count];

int startX=0,startY=0,endX=0,endY=0;

Canvas startObj=null,endObj=null;

String drawclear="";

int clickX=0,clickY=0,moveX=0,moveY=0;

canvas[] can=null;

myCanvas[] mycan=new myCanvas[count];

Canvas curcan=null;

Canvas curdelcan=null;

Image curimg=null;

JPanel jp=new JPanel(null);

myCanvas drawLine=new myCanvas("drawLine");

MediaTracker mt=new MediaTracker(this);

public void init() {

img[0]=this.getImage(this.getCodeBase(),"1.gif");

img[1]=this.getImage(this.getCodeBase(),"2.gif");

img[2]=this.getImage(this.getCodeBase(),"1.jpg");

img[3]=this.getImage(this.getCodeBase(),"2.jpg");

img[4]=this.getImage(this.getCodeBase(),"3.jpg");

img[5]=this.getImage(this.getCodeBase(),"4.jpg");

this.resize(800,600);

this.setLayout(null);

for(int i=0;i<img.length;i++)

mt.addImage(img[i], 0);

try {

mt.waitForAll();

} catch(Exception ex) {System.err.println(ex.toString());}

this.add(jp);

jp.setBounds(0,0,800,80);

jp.add(this.drawLine);

jp.setBackground(new Color(230,230,230));

drawLine.setBounds(5,5,90,30);

drawLine.addMouseListener(new MouseAdapter() {

public void mousePressed(MouseEvent e) {

clickdrawLine(e);

}

});

for(int i=0;i<img.length;i++) {

mycan[i]=new myCanvas(img[i]);

width[i]=img[i].getWidth(this);

height[i]=img[i].getHeight(this);

jp.add(mycan[i]);

mycan[i].setBounds(100+5*(i+1)+widthcount,5,img[i].getWidth(this),img[i].getHeight(this));

widthcount+=img[i].getWidth(this);

}

this.addMouseListener(new MouseAdapter() {

public void mouseClicked(MouseEvent e) {

clickhere(e);

}

});

}

public void clickhere(MouseEvent e) {

if(this.curcan==null)return;

if(e.getModifiers()==MouseEvent.BUTTON3_MASK) {

Canvas ca=new canvas(curimg);

this.add(ca);

ca.setBounds(e.getX(),e.getY(),curimg.getWidth(this),curimg.getHeight(this));

this.validate();

}

public void clickdrawLine(MouseEvent e) {

if(drawLine.getBackground().equals(new Color(230,230,255))) {

drawLine.setBackground(new Color(230,230,230));

startObj=null;

endObj=null;

drawclear="";

} else {

drawLine.setBackground(new Color(230,230,255));

drawclear="draw";

}

public void paint(Graphics g) {

for(int i=0;i<v.size();i++) {

Vector v1=(Vector)v.elementAt(i);

startX = ((int[])v1.elementAt(1))[0] + ((int[])v1.elementAt(1))[2] / 2;

startY = ((int[])v1.elementAt(1))[1] + ((int[])v1.elementAt(1))[3] / 2;

endX = ((int[])v1.elementAt(1))[4] + ((int[])v1.elementAt(1))[6] / 2;

endY = ((int[])v1.elementAt(1))[5] + ((int[])v1.elementAt(1))[7] / 2;

g.drawLine(startX, startY, endX, endY);

drawArrowhead(g,((Canvas[])v1.elementAt(0))[0],((Canvas[])v1.elementAt(0))[1]);

}

public void drawArrowhead(Graphics g,Canvas startObj,Canvas endObj) {