MxGraph - Delete删除事件监听失效

问题

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

对于新拖入的块点击键盘的Delete删除失效,但是mxgrah已经添加了keyboard的事件监听,这是因为新增的时候()未点击到画布失焦,此时mxgraph没有监听到对于的键盘事件

解决

在click事件那边添加上如下代码

  graph.addListener(mxEvent.CLICK, function(sender, evt) {
    graph.container.setAttribute('tabindex', '-1')
    graph.container.focus()

    // 其它代码...
  })

 

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 参考,可以帮助你更好地理解和使用该库。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值