标题: 基于java-applet的简单流程图绘制小工具的制作 
<pre id=code><font face=courier size=2 id=code>  作为IT行业中的一员,相信很多人都接触过流程图。在一个软件的开发过程中,无论是前期的需求分析、系统设计,还是后面具体的程序设计都涉及到流程图的绘制,跟单调的文字说明相比,它以更直观的方式把整个系统呈现在用户面前。通常,我们都是使用软件开发商已经开发出来的流程图制作软件来绘制流程图,不知各位有没有自己制作过流程图绘制工具呢?这里说说基于java-applet的流程图制作小工具的制作,希望对大家学习有帮助。另外,在阅读本文档代码的时候,如有发现不妥当的地方,欢迎指正,谢谢!
//**************
一、整体框架设计
import javax.swing.*;
import java.awt.*;
import java.awt.image.*;
import java.awt.event.*;
import java.applet.*;
import java.util.*;//装载代码编写过程中需要用到的api-packagepublic 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);//文字,线型
}
}
}

解决方案 »

  1.   

    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);
      }
    });
    }
      

  2.   


    四、给事件编写代码:
    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键,就可以删除刚才选中的图标以及与它相连的所有线段。
    </font id=code></pre id=code>