如何获取maxGraph单元格的id'的内容

How to get the id of an maxGraph cell's content

本文关键字：id 单元格 何获取 获取 maxGraph      更新时间：2023-09-26

我创建了一个图形，并通过拖放在上面设置单元格。但是，当发生拖放或单击时，我找不到可供使用的单击单元格的html。

例如，我试图获取mxEvent.CLICK中被拖动元素的ID。

graph.addListener(mxEvent.CLICK, function(sender, evt){
    var cell = evt.properties.cell;
    // cell.id is the cell id, not an id of html that's inside of it.
    if(cell) {
        var outer = cell.value.outerHTML; // I can see the HTML here encoded
    }
})

更新：因此，在创建可拖动项目时，我使用value.setAttribute('htmlLabel', label);将html添加到单元格中。然而，htmlLabel似乎不是evt对象中任何位置的键。

我已经在一个大型项目中使用MxGraph几个月了，虽然它是一个很棒的库，但在某些领域使用起来有点麻烦。

HTML就是其中一个方面。

首先，您需要使用"MxGraph"工具集获取事件的对象，如下所示：

graph.addListener(mxEvent.CLICK, function(sender, event){
    var mouseEvent = event.getProperty('event');
    var selectedCell = event.getProperty('cell');
});

正如您已经计算出的，您可以通过选定单元格的ID属性从中获取单元格ID，但除此之外，该对象上没有太多其他内容。

要深入了解，您需要深入了解您也得到的鼠标事件。

它只是一个普通的HTML事件，因此具有您期望找到的常规属性。

在您的情况下

mouseEvent.currentTarget.innerHTML

将为您获取单击的元素的HTML（您可能需要在调试器中探索不同的路径，但这在最新版本的chrome中确实适用）

不过，您需要注意的一点是，MxGraph使用SVG渲染其所有输出，而且据我所见，渲染的标记上没有标准的HTML ID属性，事实上，渲染的图形元素上似乎都没有ID。

一周前，当我试图获取MxGraph生成的输出来进行一些图像操作时，我遇到了这个问题，因为我无法可靠地获取单个图像，所以我不得不使用Base64编码的字符串，并使用MxGraph的API来操纵单元格样式表。

我使用xml创建图表：

...
<mxCell id="start" value="Start" style="start" vertex="1" parent="1"><mxGeometry x="0" y="0" width="30" height="30" as="geometry"/></mxCell>
...

所以我得到了这个代码的ID：

graph.addListener(mxEvent.CLICK, function (sender, evt) {
     var cell = evt.getProperty("cell");
     var id = cell.id;
}

3.9.11版

版本3.9.8我试着使用上面的代码，但发现（graph）有错误，经过更多的搜索和尝试，我发现合适的是（mxGraph.protype），所以这个代码应该是：

mxGraph.prototype.addListener(mxEvent.CLICK, function(sender, event){
var mouseEvent = event.getProperty('event');
var selectedCell = event.getProperty('cell');
});
相关文章：