Question

我创建了一个图表，并通过拖放将单元格设置到它上面。但是当发生掉线或点击时，我无法找到被点击的单元格的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

    }

})

更新：因此，当我的可拖动项目被创建时，我将html添加到具有value.setAttribute('htmlLabel', label);的单元格。但是htmlLabel似乎不是evt对象中的任何关键字。

Answer 1

我已经和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的单元格样式表。

Answer 2

我使用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

Answer 3

在3.9.8版中我尝试使用上面的代码，但在进行更多搜索和尝试后发现（graph）错误，我发现合适的是（mxGraph.prototype），因此此代码应为：

mxGraph.prototype.addListener(mxEvent.CLICK, function(sender, event){

var mouseEvent = event.getProperty('event');
var selectedCell = event.getProperty('cell');
});

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

3 个答案: