MxGraph - 解决通过mxgraph外部添加进mxgraph的mxCell不能立马被删除的问题

本文记录了在使用mxGraph时遇到的一个问题:新添加的mxCell无法直接删除,需要先点击画布才能删除。经过研究发现,问题在于mxGraph画布失去焦点导致删除事件未触发。解决方案是通过让画布获取焦点来解决此问题,通过添加特定代码使新添加的mxCell能够立即被删除,从而加深了对mxGraph的理解。
摘要由CSDN通过智能技术生成

连着两个项目使用mxGraph来集成画流程图的功能,被这个东西折腾的够呛。
突然又遇到mxGraph相关的问题,搞了一上午没解决掉,突然找到解决方法,记录一下过程。

背景

项目中集成了mxGraph,可以把项目中的一些代表步骤的 activity 通过 拖拽 或者 点击 的方法添加进mxGraph的画布中(项目中的activity => mxGraph中的mxCell)。

如下图:左边是项目中的工具栏,右边是mxGraph的画布左边是项目中的工具栏,右边是mxGraph的画布

问题

添加 -> 选中 -> 删除失败 -> 点击画布 -> 选中 -> 删除成功

新建mxGraph工程,从项目的工具栏中添加一个 activity(mxCell) 到 mxGraph的画布中,此时通过delete键或者退格键删除这个新添加的mxCell,发现删除事件并没有被触发。此时点击一下画布,重新选中该mxCell,按delete键或者退格键, 删除成功。

过程

这个现象可以看出,如果在添加后想办法自动点击一下画布应该就可以解决问题,于是就用各种办法去实现用代码对画布容器的点击,但是均以失败告终。

一上午时间过去了…

换个思路,这个过程也像

mxGraph 是一个基于 JavaScript 的开源图形库,它提供了一套完整的基于 Web 的图形解决方案,可以用于创建交互式的图形界面和图表。它支持各种类型的图形对象,包括节点、连线、箭头、文本、图片等,并且可以通过拖放、缩放等交互方式来编辑和操作这些图形对象。mxGraph 的功能非常强大,可以用于构建各种类型的图形应用程序,比如流程图、组织结构图、UML 图、时序图等。 下面是使用 mxGraph 的基本步骤: 1. 引入 mxgraph 库文件。 在 HTML 文件中引入 mxgraph 库文件,可以通过以下方式引入: ```html <script src="mxgraph/javascript/mxClient.js"></script> ``` 2. 创建画布对象。 mxGraph 的主要对象是 mxGraph 对象,我们需要先创建一个 mxGraph 对象,然后将其挂载到 HTML 页面上的一个容器元素中,例如: ```html <div id="graphContainer"></div> ``` ```javascript // 创建画布对象 var container = document.getElementById('graphContainer'); var graph = new mxGraph(container); ``` 3. 创建图形对象。 mxGraph 提供了各种类型的图形对象,可以通过 mxGraph.insertVertex() 和 mxGraph.insertEdge() 方法来创建节点和边,例如: ```javascript // 创建一个节点 var vertex = graph.insertVertex(parent, null, 'Hello, World!', 20, 20, 80, 30); // 创建一条边 var edge = graph.insertEdge(parent, null, '', vertex1, vertex2); ``` 4. 设置图形对象样式。 mxGraph 的图形对象可以通过样式来设置其外观和行为,例如: ```javascript // 设置节点样式 vertex.setStyle('fillColor=#FFFFFF;strokeColor=#000000;'); // 设置边样式 edge.setStyle('endArrow=classic;'); ``` 5. 添加交互行为。 mxGraph 支持各种类型的交互行为,包括拖放、缩放、连线等,可以通过 mxGraph.addListener() 方法来添加事件监听器,例如: ```javascript // 添加拖放行为 var rubberband = new mxRubberband(graph); ``` 以上是 mxGraph 的基本使用步骤,你可以通过 mxGraph 提供的 API 和示例代码来学习更多的用法和技巧。同时,mxGraph 提供了完善的文档和 API 参考,可以帮助你更好地理解和使用该库。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值