画图组件jgraphx项目整体介绍(一)

Java画流程图
placeholder image
admin 发布于:2023-07-30 12:30:12
阅读:loading

工作中有许多的流程类的业务需求,往往需要使用前端的一些组件进行绘制,它们可以是基于svg、canvas之类的技术构建,即可以在网页中展示又可以编辑,不过既然是前端技术它们必须要依赖于浏览器或其它之类的显示介质进行展示,无法通过某些服务端的程序直接生成可展示的图形化(通俗点就是跳过浏览器),加之前端的这些框架(如:bpmn-js)上手应该不会太难吧,所以虽然还会但我也不想深入研究,一是工作中未需要使用,二是兴趣不在此,但是对于后端语言的实现我却不能容忍我不会,所以就稍微摸索了一些,把相关的实践整理出来。

1.基本介绍

为什么不能容忍自己后端语言上的不会呢,是因为有一些业务场景上只能从后端实现,比如一些定时任务执行的程序,需要生成一些流程类的图形,此时与浏览器运行的程序没有关系;再比如需要导出至PDF、Word、Excel等一些文件中展示时;再有就是发送邮件类的程序,若将流程图形直接作为附件或图片展示在邮件中时,就需要以服务的的形式生成图形。所以,本次重点实践的将是以后端Java语言为基础的画图类技术实现。

本次所谓的画图类实现,并不是图形统计图表(不是JFreeChart,虽然它非常强大),而是框框杠杠的流程图,在Java中想要绘制一些流程图的实现我问了一下AI,它告诉我可以是以下几个方面:

(1)使用图形库:Java中有一些专门用于图形绘制的库,如JGraphX、JUNG(Java Universal Network/Graph Framework)、GraphStream等。这些库提供了丰富的API和功能,可以用于创建和编辑各种类型的图形,包括流程图。

(2)使用图形编辑工具包:Java中有一些图形编辑工具包,如GEF(Graphical Editing Framework)、Draw2D等,它们提供了一套用于创建和编辑图形的框架和组件。你可以使用这些工具包来构建自定义的图形编辑器,以绘制和编辑流程图。

(3)使用绘图库:Java中有一些绘图库,如Java 2D、JavaFX等,它们提供了绘制2D图形的功能。你可以使用这些库来创建自定义的绘图组件,并使用图形元素(如矩形、圆形、线条等)来绘制流程图。

(4)使用流程图库:有一些专门用于绘制和操作流程图的Java库,如Activiti、jBPM等。这些库提供了高级的流程建模和执行功能,并支持将流程图导出为图形文件或图像。

(5)使用Web技术:如果你的应用程序是基于Web的,你可以使用JavaScript库来绘制流程图,并将其嵌入到Java Web应用程序中。一些流行的JavaScript库包括mxGraph、JointJS、GoJS等,它们提供了丰富的图形绘制和编辑功能。

总结一下以上说的几条:

(1)使用图形库来绘制,整体上调研了后觉得JGraphX效果和功能上要稍好些,所以它将是本次实践的主角(我个人的浅见);

(2)Java中的2D图形功能Graphics2D虽然可以画框、画箭头、颜色、字体等,但是我没找到成体系的或者效果比较好的实现;

(3)Web技术方面的不在本次的倾向范围内;

2.jgraphx介绍

GraphX是一个用于创建图形化用户界面(GUI)的Java库,它提供了一个强大的图形绘制和编辑框架,它是一个根据 BSD 许可证授权的 Java Swing 图表(图形可视化)库,虽然包名称使用“mxGraph”,但该库并不称为 mxGraph,mxGraph 是 JavaScript 图表库 - https://github.com/jgraph/mxgraph。下面是关于JGraphX组件的一些详细介绍:

(1)图形绘制和显示:JGraphX提供了一个灵活的图形绘制引擎,可以绘制各种类型的图形,包括节点、边、标签、箭头等。它支持自定义节点和边的外观、样式和布局,可以根据需要进行定制。

(2)图形编辑和交互:JGraphX支持用户与图形进行交互和编辑。它提供了丰富的交互功能,如拖拽、缩放、平移、选中、连接等。用户可以通过鼠标和键盘操作来编辑图形,包括添加、删除、移动和修改节点、边和标签。

(3)布局算法:JGraphX内置了多种布局算法,用于自动排列和调整图形的布局。这些算法可以根据图形的特性和需求,自动计算节点和边的位置和排列方式,以实现更好的可视化效果。常见的布局算法包括层次布局、树形布局、圆形布局等。

(4)导入和导出:JGraphX支持从多种格式导入和导出图形数据,包括XML、JSON、图片等。这使得用户可以方便地将图形保存到文件或从文件中加载图形数据,以便进行后续处理或共享。

(5)扩展和定制:JGraphX提供了丰富的扩展和定制能力,使开发人员能够根据自己的需求进行功能扩展和定制化开发。你可以通过自定义绘制器、布局算法、交互行为等来实现特定的图形效果和交互体验。

总的来说,JGraphX是一个功能强大且灵活的图形绘制和编辑库,适用于构建各种图形化应用程序,如流程图编辑器、组织结构图、UML工具等。它具有丰富的功能和易于使用的API,可以帮助开发人员快速构建具有复杂图形操作和交互的应用程序。

3.jgraphx示例

其实jgraphx提供的示例并不多,甚至来说很少很少,这也让我在入门时犹豫了许久,始终是由于示例过少,再加上花费的时间较少,所以学习起来真的是非常困难的,这不以下可数的示例个数也就10来个而已,这让人如何去学习呢,是不是太难了,所以我也算费了很大的劲,稍微的入门了,也挑了一些示例来学习,参考如下。

image.png

(示例参考图)

(1)必须从HelloWorld.java类的示例开始,它包含了两个矩形框和一条连接线,比较简单,运行示例参考如下:

image.png

(2)ClickHandler.java的示例是演示了这些图形元素的点击事件,当点击两个矩形和连接线的时候,均可以被事件触发。

(3)CustomCanvas.java的示例是演示这些图形元素的主题自定义,它的效果区别于默认的蓝色边框和背景,完全由自定义,参考如下:

image.png

(4)FixedPoints.java的示例演示了多种图形边框的显示,元素可以是矩形、三角形、椭圆形,线条也可以是直角折现和钝角折线,参考如下图所示:

image.png

(5)Port.java示例演示了某个元素的左右可以存在两个小圆,小圆不用作边缘的端子,而是仅用于计算图形连接点,参考如下图所示:

image.png

(6)SchemaEditor.java的示例实属没有看懂它是干啥的,点了点啥感觉也没有,参考如下图所示:

image.png

(7)Stencils.java示例演示了从xml模板文件中获取预先设置好的样式,生成对应的图形,参考如下图所示:

image.png

(8)UserObject.java示例演示了将一些数据存储于某个节点位置,通过属性设置的方式来存储,这在将对图形的编辑时比较有用,可将数据另存为xml时得到自定义的属性,运行结果预览基本同HelloWorld示例。

(9)Validation.java示例演示了一些连接线的验证,不允许元素之间箭头的随意连接,参考如下图所示:

校验连接线.gif

(10)GraphEditor.java示例(若按照字母排序罗列示例的话早都到它了,因为这个示例比较重要,所以放在最后)比较全面,算是示例中的最全面、最权威、最有价值的示例了,它以一种编辑器的示例出现,囊括了更多范围的绘制,总结如下:

    A.图形框更加全面,有矩形、圆角矩形、正圆形、椭圆形、三角形、菱形、六边形、云彩形、数据库形、操作员形等,还有包含双边框和多功能分布的容器;

    B.线条上包含了水平线、箭头线、向后折线、向上折线、空心连接线等;

    C.可以插入自定义图片;

    D.可以在示例中自由涂鸦,导出图片为xml或svg或png等多种类型;

    E.可以打开已经保存的xml文件进行示例还原;

    F.右键多属性可以设置等;

图片涂鸦.gif

4.其它说明

(1)JGraphX项目地址为“https://github.com/jgraph/jgraphx”,代码存储库已由所有者于 2020 年 11 月 14 日存档,它现在是只读的,所以它三年没有更新了;

(2)JGraphX项目代码最早提交于9年前,许多的类的命名规范使用的小写字母开头的

(3)JGraphX项目代码中的示例都是基于Java Swing展示的,也可以将示例的结果转换为xml配置文件和导出图片进行展示

(4)JGraphX项目代码中的示例GraphEditor比较重要,可以以它为重点进行侧重实践,它提供了比较全面的案例实现,而且可以使用该示例进行画图,将画图的结果另存为xml格式(示例中叫.mxe),分析xml节点的构成分布和属性,基本就能够通过面向对象的代码来还原这些画图的过程,这是比较关键的逆向分析(跟几年前学习docx4j一样,不知道代码怎么写的时候,通过Word实现好结果,再用xml打开Word,就能看到需要实现好的结果后的代码分布,再用对应的Java代码来还原);

(5)相关下载,可点击 源码工程.txt 进行下载,在原有项目示例代码的包中新建了chendd包,为个人的示例源码包;


 点赞


 发表评论

当前回复:作者

 评论列表


留言区