mxGraph编程之Winform/WPF客户端显示根据xml保存的流程图

最新推荐文章于 2024-07-18 20:08:47 发布
最新推荐文章于 2024-07-18 20:08:47 发布
阅读量1k 收藏
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012878073/article/details/81629712
版权
本文介绍了如何使用mxGraph .NET库将Web端保存的XML流程图在Winform或WPF客户端应用程序中显示。通过解析XML数据，利用mxCellRenderer的CreateImage方法生成图像，并进行Base64编码存储。在客户端，从数据库检索数据，解码并显示在pictureBox上。
摘要由CSDN通过智能技术生成

最近用户对我们的软件提了一个新的需求，就是把web端做好的流程图，保存之后要能在Winform的客户端应用程序可以看到。

记得上回我给大家分享了从数据库加载xml数据显示和将xml数据保存到数据库，那么显然，我们在将xml保存到数据库之前，还需要将xml数据做一个转换，转换成图像数据，然后base64编码之后保存到数据库。

这就不得不涉及到mxgraph的一个用于dotnet的一个开发库，可以在 https://github.com/jgraph/mxgraph 上下载到，下载之后找到dotnet文件夹，打开里面的解决方案，然后编译，会生成一个dll。

这里重点讨论一下，web端和客户端数据传输的问题，虽然我们用的是mysql数据库，我们也可以获取到流程图的xml数据，但是我们如何将其转化成图像数据呢？mxGraph已经封装了一些操作，我们可以直接调用这些操作来生成图像数据

核心的类就是mxCellRenderer类，里面有一个方法叫做CreateImage，参数比较多，一一讲解：

CreateImage:

  1. graph - 你构建的mxGraph对象
  2. cells - 流程块，一般为null，因为流程块信息都在graph对象里面
  3. scale - 缩放，通常为1，即不缩放
  4. background - 生成图片的背景颜色，最好给成控件的背景色
  5. antiAlias - 抗锯齿，当然要抗锯齿了啊
  6. clip - mxRectangle对象，一般给null

那么现在很明确了

最低0.47元/天 解锁文章
开源骑士
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mxGraph编程之解析xml流程图数据并保存至数据库
OGRE
07-03 5789
mxGraph是一套前端流程图控件库，通过它，你可以表示出清晰的流程图界面，可以更好地展示数据之间的相关性mxGraph后台存储数据的时候用的是xml，虽然在上期我也说了，xml数据可以直接由mxGraph系统解析并加载出来，但是有些时候，我们需要将用户拖拉出来的流程图保存起来，然后供我们使用。我们这边做项目的时候，碰见过一个需求，就是用户通过浏览器拖拉出来的流程图，保存之后，再由我们的客户端软件...
mxGraph后台保存成xml文件
rentongtmd123的博客
11-30 1024
mxGraph下载的破解源码,做流程图定制功能,做一些总结. 进入例子examples文件中的作图功能,查看例子源码,页面上保存,导出,打开按钮等不能用,可以把this.actions.get('open').setEnabled(enabled || fileSupport); this.actions.get('import').setEnabled(enabled || fi...
C# WinForm工作流程图设计，拖拽节点、绘制工作流程图、GDI绘制+多种功能，C# WinForm 工作流程图设计插件：拖拽绘制+节点移动+连线连接+属性编辑+数据保存加载
最新发布
kHDFsCZE的博客
07-18 957
工作流程图可以直观地展示工作流的执行顺序和数据流动，帮助开发人员更好地理解和设计复杂的业务逻辑。工作流程图中的节点可以通过直线连接起来，以表示节点之间的关联关系和数据流动。用户可以加载之前保存的工作流程图数据，以便进行进一步的开发和修改。当用户移动一个节点时，与该节点连接的连接线会自动跟随并调整位置，以保持节点之间的正确连接。当用户选择一个节点或连接线时，选中的节点和连接线将以高亮显示，以便用户更清晰地识别和操作。工作流程图中的节点和连接线可以显示文本信息，以帮助用户更好地理解工作流程的含义和执行顺序。
C# winform流程图项目（功能完整，中文注释，附下载链接）绘制各种流程图形，保存，步骤记录，删除，连接断开，直线折线，属性调节
weixin_43474701的博客
09-12 2101
C# winform流程图项目（功能完整，中文注释，附下载链接）绘制各种流程图形，保存，步骤记录，删除，连接断开，直线折线，属性调节 **`主要功能如下`** 1、鼠标点击工具箱后在画布点击拖出图形； 2、选中直线节点靠近图形节点自动连接； 3、双击图形可以输入图形和连接线文字； 4、选中图形和直线可以调节其属性，如（填充颜色，文字，背景，精确位置，图形长宽）； 5、右击菜单功能丰富（看下面第三个图）； 6、图形可以置顶置底； 7、图形含前驱节点后驱节点； 8、详细的中文注释，正规的程序结构，方便的进行
WFP加载xml文档生成wpf界面UI
weixin_30835923的博客
04-25 336
WPF的界面元素都是xaml标签，当然也是xml标签，可以将ui文档放到一个xml文件中，然后动态的去读取xml文件中xaml标签，然后现在到wpf的window中 方法 1。先创建一个xml文件，里面放xaml的标签元素 需要注意的是是Grid元素的xmln标签一定不能少，而且要将xml文件作“资源”进行设置 <Grid xmlns="http://schemas.m...
mxGraph编程之加载流程Xml数据显示
OGRE
06-22 5979
最近因项目要求，研究了一下mxGraph的用法，总结了一些使用mxGraph的心得体会。mxGraph自不必多言，史上最强大的web流程图绘制插件，没有之一。mxGraph除了拖拽流程块之外就是保存各个流程块之间关联关系的数据，mxGraph在保存流程块数据的时候，使用的是xml数据进行，在这个json满天飞的现在，mxGraph还使用xml保存数据确实称得上是一种奇葩，不过，mxGraph的xm...
mxGraph插件，java代码xml导出成图片
11-28
在这个场景中，我们需要利用mxGraph前端插件来绘制流程图，并通过Java后端将XML数据转换为图片。 在前端部分，mxGraph允许用户通过JavaScript代码动态构建图形，这些图形可以是流程图、组织结构图等。用户可以...
基于mxGraph来做的一款web的绘制流程图的javascript库工具mxGraph_gpx.zip
12-06
7. **导出和导入**：支持图形的XML格式（mxGraph Model XML，简称MXGM）进行数据交换，便于保存和恢复工作。 8. **多语言支持**：mxGraph的API文档有多种语言版本，方便全球开发者使用。 在结合Vue框架时，开发者...
mxGraph是一个完整的客户端JavaScript图表库
08-10
mxGraph是一个强大的客户端JavaScript库，专门用于创建交互式和可自定义的图形界面。这个库以其高度灵活性、广泛的功能和高性能而闻名，被广泛应用于数据可视化、流程图、UML模型、网络拓扑图以及各种复杂的图形应用...
mxGraph 破解版备份 流程图 绘制
04-17
mxGraph 破解版备份 流程图 绘制
mxGraph JS 绘图组件
02-05
mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑 ...　程图、图表、网络图和普通图形的 Web 应用程序。mxgraph 下载包中包括用 　javescript 写的前端程序,也包括多个和后端程序(java/C#等等)集成的例 　子。
mxgraph svg2xml
12-01
mxgraph自定义图元很难调试，这个工具可以通过svg转为xml ,通过微调达到图元定义的目的
mxgraph之保存图片
03-29
NULL 博文链接：https://lynnlysh.iteye.com/blog/1290007
mxgraph做的小例子
10-31
自己做的mxgraph的小例子，初学者可以参考参考
mxgraph中将xml文件（文本）显化还原成图形的过程
前端-尔嵘
11-29 2998
在mxgraph中你保存好的流程图基本是xml格式的，所以我们要用他自带的方法解析显化成图形来。在example中，有个专门做显化的viewer.html文件，文件代码如下： <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]--> <!DOCTYP...
mxgraph--------save保存成xml文件
前端-尔嵘
11-13 1402
官方并没有实现如何保存成xml格式的功能。我是实现保存到数据库的。
Mxgraph使用总结一
a7412605567的博客
07-04 646
一、Mxgraph介绍： mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑 Workflow/BPM流程图、图表、网络图和普通图形的 Web 应用程序。mxgraph 下载包中包括javescript 写的前端程序,也包括多个和后端程序(java/C#等等)集成的例子。 git开源项目地址：https://github.com/jgrap...
C# winform流程图项目（功能完整，中文注释，附下载链接）绘制各种流程图形(2)
2401_84617681的博客
05-15 376
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
如何以XML导出mxGraph流程图？
前端-尔嵘
11-13 1753
如何以xml格式导出我的绘画内容， 单击导出按钮后，我已回到本地主机：8090，返回到演示 如何出口？该文档找不到确切的 于是尝试了： var encoder = new mxCodec(); var node = encoder.encode(graph.getModel()); mxUtils.popup(mxUtils.getPrettyXml(node), true); ...
vue mxgraph 流程图实例
06-07
好的，这里给您提供一个简单的 Vue + mxGraph 实现流程图编辑的示例： 1. 安装 mxgraph-vue ``` npm install mxgraph-vue ``` 2. 在 Vue 组件中引入 mxgraph-vue ```vue <template> <div> <mxgraph ref="graph" v-bind:config="config" v-bind:editor-config="editorConfig"></mxgraph> </div> </template> <script> import mxgraph from 'mxgraph-vue'; export default { components: { mxgraph }, data() { return { config: { // 配置 mxGraph 的一些属性 // 可以参考 mxgraph-vue 的文档：https://github.com/jgraph/mxgraph-vue }, editorConfig: { // 配置 mxGraph 编辑器的一些属性 // 可以参考 mxgraph-vue 的文档：https://github.com/jgraph/mxgraph-vue } } }, mounted() { // 初始化 mxGraph this.$refs.graph.init(() => { // 在这里可以进行一些初始化操作 }); } } </script> ``` 3. 实现流程图的编辑功能 ```vue <template> <div> <mxgraph ref="graph" v-bind:config="config" v-bind:editor-config="editorConfig"></mxgraph> </div> </template> <script> import mxgraph from 'mxgraph-vue'; export default { components: { mxgraph }, data() { return { config: { // 配置 mxGraph 的一些属性 // 可以参考 mxgraph-vue 的文档：https://github.com/jgraph/mxgraph-vue }, editorConfig: { // 配置 mxGraph 编辑器的一些属性 // 可以参考 mxgraph-vue 的文档：https://github.com/jgraph/mxgraph-vue graphModel: { // 设置默认的节点和边的样式 defaultVertexStyle: { shape: 'rectangle', fontSize: 14, fontColor: '#000000', fillColor: '#ffffff', strokeColor: '#000000', strokeWidth: 1, rounded: true, }, defaultEdgeStyle: { shape: 'connector', fontSize: 12, fontColor: '#000000', strokeColor: '#000000', strokeWidth: 1, rounded: true, } } } } }, mounted() { // 初始化 mxGraph this.$refs.graph.init(() => { // 创建节点 const node1 = this.$refs.graph.addNode('节点1', 100, 100, 100, 50); const node2 = this.$refs.graph.addNode('节点2', 300, 100, 100, 50); const node3 = this.$refs.graph.addNode('节点3', 500, 100, 100, 50); // 创建边 this.$refs.graph.addEdge('边1', node1, node2); this.$refs.graph.addEdge('边2', node2, node3); }); } } </script> ``` 以上示例代码仅供参考，您可以根据自己的需求进行修改和扩展。希望能对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值