基于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键,就可以删除刚才选中的图标以及与
它相连的所有线段。
效果图片:
 如有不明白的地方可以来信:[email protected] //*********************************************************************** //* 全部代码 * //*********************************************************************** 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) { 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; }
//********************************************动态图标 class canvas extends Canvas { Image im=null; public canvas(Image im) { super(); this.setCursor(new Cursor(Cursor.MOVE_CURSOR)); this.im=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); } }); }
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) { g.drawImage(im,0,0,this); } }
//****************************************************图标工具栏 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; this.addMouseListener(new MouseAdapter() { public void mousePressed(MouseEvent e) { clickmyCanvas(e); } }); }
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; }
public void paint(Graphics g) { if(str.equals("")) g.drawImage(im,0,0,this); else { g.drawString(str,20,getHeight()/2); } } } } 
|