jBPM4.4：如何图示化显示当前的流程执行到了哪一步骤

流程执行时，有时候需要看一下当前的工作卡在哪一步了，对于熟悉流程的人员来说，看到节点的名字即可。对于不熟悉的人员来讲，就需要把整个流程图显示出来，把当前的工作点标注出来。



在生成工作流程xml文件的时候，已经生成了一个工作流程的png流程图，只需要在这个png上把当前活跃的节点表示出来即可。

网上的一种做法很简单，就是在这个png上再加一个div层，把执行的活跃节点框起来就可以了。



首先：

1. 获取当前的流程图显示

2. 获取当前的活跃节点

3. 生成相关的Div层





详细代码：

1. 获取当前的流程图：

  由于流程图是放在load字段中的（发布的时候，需要把流程图和xml文件打包成zip文件一起发布，否则后面是找不到这个png文件的），通过RepositoryService获取到流程图：



Java代码
InputStream is = repositoryService.getResourceAsStream(deployId, pngFileName);   
  
//这个inputstream中的内容就是图片，直接输出到页面中   
byte[] pic = new byte[1024];   
int len = -1;   
while( (len=is.read(b,1024) )!=-1 ){   
  response.getOutputStream().write(pic, 0, len );   
}  
InputStream is = repositoryService.getResourceAsStream(deployId, pngFileName); //这个inputstream中的内容就是图片，直接输出到页面中 byte[] pic = new byte[1024]; int len = -1; while( (len=is.read(b,1024) )!=-1 ){ response.getOutputStream().write(pic, 0, len ); }
 


以上的工作可以放在一个单独的页面中完成，作用就是输出图片。






2. 获取当前活跃的节点：



Java代码
// 通过processId，获取到processInstance   
ProcessInstance pi = executionService.findProcessInstanceById(id);   
  
// 获取所有活跃的节点：   
Set<String> activitySet = pi.findActiveActivityName();  
// 通过processId，获取到processInstance ProcessInstance pi = executionService.findProcessInstanceById(id); // 获取所有活跃的节点： Set<String> activitySet = pi.findActiveActivityName();
 


3. 在页面上输出：

首先输出完成的png图片，随后在每个活跃的节点上画一个框：

输出png图片：



Html代码
<img src="第一步完成的页面地址?参数" style="position:absolute;left:0px;top:0px;">  
  
// 注意这里面style，要和后面画框的div匹配，否则对不起来了  
<img src="第一步完成的页面地址?参数" style="position:absolute;left:0px;top:0px;"> // 注意这里面style，要和后面画框的div匹配，否则对不起来了
 


画框：



Html代码
//刚才已经获取了所有的活跃节点   
<%   
for( String activityName : activitySet ) {   
  ActivityCoordinates ac = repositoryService.getActivitycoordinates(    
       pi.getProcessDefinitionId();  activityName );   
%>  
  
// 每个活跃节点上，画一个框   
<div style="position:absolute; border; 1px solid red; left:<%=ac.getX()%>; top:<%=ac.getY()%>;width:<%=ac.getWidth()%>;height:<%=ac.getHeight%>;"   />  
  
<% } %>  
//刚才已经获取了所有的活跃节点 <% for( String activityName : activitySet ) { ActivityCoordinates ac = repositoryService.getActivitycoordinates( pi.getProcessDefinitionId(); activityName ); %> // 每个活跃节点上，画一个框 <div style="position:absolute; border; 1px solid red; left:<%=ac.getX()%>; top:<%=ac.getY()%>;width:<%=ac.getWidth()%>;height:<%=ac.getHeight%>;" /> <% } %>