Mind，Diagram，Design

最新推荐文章于 2023-08-04 01:15:09 发布
最新推荐文章于 2023-08-04 01:15:09 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： 编程之美 架构之魂
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengjia10/article/details/8257057
版权

        最近在设计新版的流程渲染引擎，考虑采用无损失放缩的矢量图SVG去搞，从技术调研到实现蛮有心得的，这里贴出自己的设计思路，欢迎拍砖～

        首先说下诉求，简单说就是绘制流程地图。其次简单列举下需要注意的技术点：

（1） 图形元素和坐标元素解析（合并or分拆）

（2） DOM树解析，原生JAXP，DOM4J or SVG DOM utils（混用会带来很多问题）

（3） REST Service Lib选型

（4） SVG 元素渲染技巧

（5）一些几何算法（旋转矢量，斜率，两点中距，碰撞检测）

（6）XML，XPath等一些奇淫技巧（Axis，namespace，doctype，qname，EntityResolver等）

        好，Mind有了，我们上图评设计；

                                                                                                      图1 ： 原型 - 比较丑

 

                                                                                                             图2 ： 预期 - 比较美


                                                                                                          图3 ： Core Class Diagram


                                                                                                                           图4 ：  REST Request Response Sequence Diagram


                                                                                                      图5：   Process-Figure Render Sequence Diagram



SVG代码片断一：（伪table样式）

<?xml version='1.0' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN'
  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

   <title>SVG Tables</title>

   <g id='columnGroup'>
      <rect x='25' y='30' width='35' height='70' fill="#c9dae5"/>

      <rect x='195' y='30' width='35' height='70' fill="#e0f0f9"/>

      <rect x='395' y='30' width='35' height='70' fill="#e0f0f9"/>
	  
      <text x='30' y='30' font-size='12' text-anchor='left'>
         <tspan x='30' dy='1em'>表头</tspan>
         <tspan x='30' dy='2em'>表头</tspan>
         <tspan x='30' dy='2em'>表头</tspan>
      </text>

      <text x='100' y='30' font-size='12' text-anchor='left'>
         <tspan x='100' dy='1em'>同意</tspan>
         <tspan x='100' dy='2em'>调查</tspan>
         <tspan x='100' dy='2em'>中国</tspan>
      </text>

      <text x='200' y='30' font-size='12' text-anchor='left'>
         <tspan x='200' dy='1em'>同意</tspan>
         <tspan x='200' dy='2em'>调查</tspan>
         <tspan x='200' dy='2em'>中国</tspan>
      </text>

      <text x='300' y='30' font-size='12' text-anchor='left'>
         <tspan x='300' dy='1em'>同意</tspan>
         <tspan x='300' dy='2em'>调查</tspan>
         <tspan x='300' dy='2em'>中国</tspan>
      </text>

      <text x='400' y='30' font-size='12' text-anchor='left'>
         <tspan x='400' dy='1em'>同意</tspan>
         <tspan x='400' dy='2em'>调查</tspan>
         <tspan x='400' dy='2em'>中国</tspan>
      </text>
   </g>
   
   <g id='rowGroup' transform='translate(0, 160)'>
      <rect id="b_rect" x='25' y='0' width='230' height='20' fill="#c9dae5"/>
	  <animateColor id="b_rect" attributeName="stroke" from="none" to="green" repeatCount="indefinite" dur="1.3s" calcMode="spline" />
	  
      <rect x='25' y='40' width='230' height='20' fill="#e0f0f9"/>

      <rect x='25' y='80' width='230' height='20' fill="#e0f0f9"/>
	  
      <text x='30' y='0' font-size='12' text-anchor='left'>
         <tspan x='30' dy='1em'>表头</tspan>
         <tspan x='100'>表头</tspan>
         <tspan x='200'>表头</tspan>
      </text>

      <text x='30' y='0' font-size='12' text-anchor='left'>
         <tspan x='30' dy='2.7em'>同意</tspan>
         <tspan x='100'>Expenses</tspan>
         <tspan x='200'>中国</tspan>
      </text>

      <text x='30' y='0' font-size='12' text-anchor='left'>
         <tspan x='30' dy='4.4em' >同意</tspan>
         <tspan x='100'>Expenses</tspan>
         <tspan x='200'>中国</tspan>
      </text>

      <text x='30' y='0' font-size='12' text-anchor='left'>
         <tspan x='30' dy='6.1em'>同意</tspan>
         <tspan x='100'>Expenses</tspan>
         <tspan x='200'>中国</tspan>
      </text>

      <text x='30' y='0' font-size='12' text-anchor='left'>
         <tspan x='30' dy='7.8em'>同意</tspan>
         <tspan x='100'>Expenses</tspan>
         <tspan x='200'>中国</tspan>
      </text>
   </g>
   
   
  <g>
     <rect x="370.0" y="144.0" width="600" height="15" fill="#c9dae5"/>
      <text x="377.0" y="144.0" font-size="11" text-anchor="left">
        <tspan id="t_blink" x="377.0" dy="1em">节点开始时间</tspan>
		<animateColor id="t_blink" attributeName="stroke" from="none" to="red" repeatCount="indefinite" dur="1.3s" calcMode="discrete" />
        <tspan x="507.0">节点结束时间</tspan>
        <tspan x="637.0">计划处理人</tspan>
        <tspan x="767.0">实际处理人</tspan>
        <tspan x="897.0">审批决策</tspan>
      </text>
      <text x="377.0" y="144.0" font-size="11" text-anchor="left">
        <tspan x="377.0" dy="2.5em">12-10-26 上午9:40</tspan>
        <tspan x="507.0" >12-10-26 下午2:53</tspan>
        <tspan x="637.0" >yun.ma</tspan>
		<tspan x="637.0" dy="1.5em">@alibaba-inc.com</tspan>
        <tspan x="767.0">admin@xbpms</tspan>
        <tspan x="897.0">重新进入</tspan>
      </text>
    </g>
</svg>

SVG代码片断二：（流程结点） 

<?xml version="1.0" standalone="no"?>
<svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>公安机关财务报销申请</title>
  <g id="svg_60">
   <rect id="svg_11" x="206" y="232" width="123" height="38" fill="#cbeddb" stroke="#0000bf" stroke-width="2"/>
   <text id="svg_12" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="12" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000" y="263" x="274">结束</text>
   <text id="svg_13" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="12" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#008000" y="245" x="272"><<End State>></text>
   <rect x="216" y="247" width="12" height="12" id="svg_24" fill="#ff0000" stroke="#bf0000" stroke-width="2" stroke-dasharray="null"/>
  </g>
  <g id="svg_61">
   <path d="m253,140l11,5.199997l-11,7.800003l0,-13z" id="svg_32" fill="#000000" stroke="#000000" stroke-dasharray="null" transform="rotate(92.72631072998047 258.50000000000006,146.5) "/>
   <line x1="254" y1="95.000002" x2="259" y2="140" id="svg_33" stroke="#000000" stroke-dasharray="null" fill="none"/>
  </g>
  <g id="svg_62">
   <rect stroke-opacity="0.71" x="198" y="56" width="123" height="38" id="svg_1" fill="#cbeddb" stroke="#261b1b" stroke-width="2"/>
   <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="12" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000" id="svg_4" y="88" x="266">财务报销申请</text>
   <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="12" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#008000" id="svg_5" y="69" x="264"><<Start State>></text>
   <g id="svg_23">
    <circle cx="211.500001" cy="78" r="8.425827" id="svg_21" fill="#007f00" stroke="#007f00" stroke-width="null" stroke-dasharray="null"/>
    <path d="m208.96106,71.672707l0.005127,12.181953l10.376938,-6.133987l-10.382065,-6.047951z" id="svg_22" fill="#d0e0d0" stroke="#007f00" stroke-width="null" stroke-dasharray="null"/>
   </g>
  </g>
  <g id="svg_63">
   <rect id="svg_8" x="203" y="153" width="123" height="38" fill="#cbeddb" stroke="#ff0000" stroke-width="2"/>
   <text id="svg_9" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="12" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000" y="185" x="271">主管申请</text>
   <text id="svg_10" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="12" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#008000" y="166" x="269"><<Task State>></text>
   <g id="svg_31">
    <rect x="211" y="169" width="13.5" height="13.935483" id="svg_25" fill="#e5e5e5" stroke="#a59898" stroke-width="2" stroke-dasharray="null"/>
    <g id="svg_30">
     <rect x="213.5" y="171.064516" width="13.5" height="13.935483" fill="#e5e5e5" stroke="#a59898" stroke-width="2" stroke-dasharray="null" id="svg_26"/>
     <line x1="214.5" y1="174.677419" x2="225.5" y2="174.677419" id="svg_27" stroke="#a59898" stroke-width="2" stroke-dasharray="null" fill="none"/>
     <line x1="215" y1="177.774193" x2="226" y2="177.774193" stroke="#a59898" stroke-width="2" stroke-dasharray="null" fill="none" id="svg_28"/>
     <line x1="214.5" y1="180.870967" x2="225.5" y2="180.870967" stroke="#a59898" stroke-width="2" stroke-dasharray="null" fill="none" id="svg_29"/>
    </g>
   </g>
  </g>
  <g id="svg_64">
   <rect x="189" y="311" width="123" height="38" fill="#cbeddb" stroke="#0000bf" stroke-width="2" id="svg_43"/>
   <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="12" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000" y="342" x="259" id="svg_44">Dubbo远程服务</text>
   <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="12" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#008000" y="327" x="256" id="svg_45"><<Dubbo Node>></text>
   <g id="svg_55">
    <circle cx="200.090371" cy="326.131744" r="4.032028" fill="#f7f77e" stroke="#e5e557" stroke-width="2" stroke-dasharray="null" id="svg_56"/>
    <circle cx="204.73279" cy="334.544693" r="4.032028" fill="#f98a6b" stroke="#ff5656" stroke-width="2" stroke-dasharray="null" id="svg_57"/>
    <circle cx="196.267203" cy="334.868268" r="4.032028" fill="#5692ce" stroke="#5858d3" stroke-width="2" stroke-dasharray="null" id="svg_58"/>
   </g>
  </g>
 </g>
</svg>

核心代码片段 

/**
 * REST API for SVG Process-Runtime-Figure
 * 
 * @author Von Gosling
 * @version 1.0.0
 */
@Singleton
@Path("svg")
public class SVGProcessFigureResource {
    private final Logger log = LoggerFactory.getLogger(getClass());

    @SuppressWarnings("unchecked")
    @GET
    @Produces(MediaType.APPLICATION_SVG_XML)
    public Response get(@Context HttpServletRequest request,
                        @DefaultValue("") @QueryParam("procId") String procId,
                        @DefaultValue("") @QueryParam("procName") String procName,
                        @DefaultValue("") @QueryParam("version") String version) {
        String content = "";
        try {
            Document doc = processDefinitionReader.getXmlProcessDefinition(procName,
                    NumberUtils.toInt(version, -1));

            if (StringUtils.isNotBlank(procId)) {
                // 获取静态流程上下文
                long procInstId = Long.parseLong(procId);
                HashMap<String, Object> staticProcessContext = (HashMap<String, Object>) processEngine
                        .getProcInstVarData(procInstId).get(0);
                // 获取流程运行期上下文
                Map<String, String> dynamicProcessContext = getProcRuntimeContext(procInstId);

                content = SVGProcessFigureGenerator.getSVG(doc, staticProcessContext,
                        dynamicProcessContext);
            } else {
                content = SVGProcessFigureGenerator.getSVG(doc);
            }
        } catch (Exception e) {
            log.error("Error occurs when getting SVG.", e);

            return Response.status(Status.INTERNAL_SERVER_ERROR)
                    .entity("Error occurs,please visit later !").build();
        }
        return Response.ok().entity(content).build();
    }
/**
 * @author Von Gosling
 * @version 1.0.0
 */
public class DomMappingPostProcessor {


    public static Document process(HashMap<String, Object> spContextMap,
                                   Map<String, String> dpContextMap, org.w3c.dom.Document svgDoc)
            throws DocumentException {
        //1. Xpath with namespace enabled 
        Map<String, String> npURIs = Maps.newHashMap();
        npURIs.put("svg", SVGConstants.SVG_NAMESPACE_URI);
        npURIs.put("xlink", SVGConstants.XLINK_NAMESPACE_URI);


        DOMReader reader = new DOMReader();
        reader.getDocumentFactory().setXPathNamespaceURIs(npURIs);


        Document doc = reader.read(svgDoc);
        //doc.accept(new NameSpaceCleaner());
        //doc.setEntityResolver(new IngoreDtdEntityResolver());


        //2.Append inline and external script
        JSBuilder.buildInlineScript(spContextMap, doc);
        JSBuilder.buildExternalScript(doc);


        //3.Append process context
        ContextBuilder.buildStaticProcessContext(doc);
        ContextBuilder.buildDynamicProcessContext(dpContextMap, doc);


        return doc;
    }


}

    好了，差不多了，整个技术设计，编码实现都圆满KO～

    欢迎大家对设计，实现部分提出异议，大笑

沙加神
关注
专栏目录
EE308 Lab7 Demand Analysis and Prototype Design
大家好，欢迎来到鱼尾的博客！
10-26 473
Lab 7 Demand Analysis and Prototype DesignFormat DescriptionPSPIntroduction of productOther DetailsMain difficultiesWhat do you have to do for this issue?How do you solve it?What gains you have?Team collaboration recordMeeting picturesspecification / proto
【软考高项】【英语知识】- 21 - 单词积累
最新发布
欢迎来到我的博客，一起探索代码里的世界！
02-20 1509
十大知识域五大过程组49个子过程。
Diagram design
05-27
多国语言绿色版_小巧免费的流程图绘制工具
绘图软件推荐——Diagram Designer
m0_58600162的博客
02-09 2826
注：此时只是线连在一起并不是多边形，不可进行填充颜色。注：此时只是把四条线组合在一起，仍不可进行颜色填充。注：DIP值越高图片清晰度越高所占内存越大。保存——选择位置——输入名称——点击确定。框选绘制的多边形——右击并选择组合。
流程图软件DiagramDesigne
10-08
本软件画流程图方便快捷.值得使用，不过是英文界面。但是很容易使用，这不用担心
流程图制作工具-Diagram Designer简要说明
热门推荐
gangganggood的专栏
03-22 1万+
最近在设计流程图，偶然发现这款软件，比较容易上手，效率不错，推荐给大家 推荐理由：小巧，方便、快捷。另，功能还很强大。 一、软件基本介绍 1：新建文件 如上图，点击New，即可创建文件。将会建立一个以.ddd为后缀的文件，这个文件貌似只有这个软件能编辑、处理。 注意Open in new window 选项，这个功能可以让我们同时编辑多个文件。 2：导出成图片文件...
DiagramDesigner流程图软件及中文安装包
05-18
DiagramDesigner流程图软件及中文安装包,Diagram Designe简单画个流程图，做一些简单的演示，没有必要出动viso这样的恐龙级软件DiagramDesigne，小巧免费流程图绘制工具. 附带中文安装包，送给英文不好的朋友。
UIPath进阶教程-1-Workflow Design
RPA--未来已来
03-27 3365
UiPath offers three diagrams for integrating activities into a working structure when developing a workflow file:  Flowchart  Sequence  State Machine 1.1 Layout Diagrams 1.1.1. Sequence Sequences...
Using the SG3525 PWM Controller - Explanation and Example: Circuit Diagram / Schematic of Push-Pull
亮仔的小天地
11-20 979
** Using the SG3525 PWM Controller - Explanation and Example: Circuit Diagram / Schematic of Push-Pull Converter ** PWM is used in all sorts of power control and converter circuits. Some common exampl...
Why do we need eventdriven architectures in microservices
AI天才研究院
08-04 1569
作者：禅与计算机程序设计艺术Event-driven architecture is one of the critical architectural patterns that has become increasingly popular among software developers and architects over the past few years. In this article, I will provide a brief overview of what an event-d
DiagramDesigner 1.28 官方中文版
06-02
DiagramDesigner 1.28 官方中文版 内嵌中文包安装时选择即可，超棒小工具 不多解释
diagram design 画的线不直 有锯齿
abc
02-18 1297
diagram design 画的线不直 有锯齿 原因是绘制线的时候没有对准 连接点， 在绘制的时候，需要稍微移动 保证 对准了 连接点
Diagram Designer 简体中文版安装包百度云链接
JavaCoder_juejue的博客
08-13 7081
链接：https://pan.baidu.com/s/1z8S58XTVhtG9hbJ4zPIKlQ 密码：pt81
DiagramDesigner中文
qq_39554030的博客
11-01 6794
逻辑画图工具DiagramDesigner,是一个很强的工具
Deprecated: Methods with the same name as their class will not be constructors in a future version o
weixin_34362991的博客
09-28 681
2019独角兽企业重金招聘Python工程师标准>>> ...
软件体系
wangxiaohua_147的博客
10-27 1684
软件体系结构第一次作业   作业要求：The following class diagramrepresents a design in factory method pattern to query the features ofdifferent types of auto insurances. See the source code for the implementationof t
Diagram Designer 的文字编辑试验
06-01 1517
软件版本：Diagram Designer (Version 1.24) 最近画图用到了DiagramDesigner，研究了下这个软件的文本编辑功能 为了便于描述，我们将DiagramDesigner的各区域进行了命名，命名参考了程序的帮助内容： 所有【Template Pane】...
Spring Boot POM 详解
Passion，Dedication，Innovation
12-19 9390
正如这幅图所展示的那样，在Spring IO Framework体系中，Spring Boot处在Execution layer，来看看官方对这层的解释： The Spring IO Execution layer provides domain-specific runtimes (DSRs) for applications built on the IO Foundation modules. A DSR may run standalone without requiring deployment
WPF Diagram画板开发：基于Fluent Ribbon框架
资源摘要信息:"Wpf的Diagram画板aistudio-wpf-diagram-master" WPF (Windows Presentation Foundation) 是微软公司推出的一种用于构建Windows客户端应用程序的用户界面框架，它是.NET Framework的一部分。它允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值