2

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

例如，我试图在mxEvent.CLICK.

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 对象中任何地方的键。

4

3 回答 3

4

我已经在一个大型项目上使用 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。

于 2016-02-04T16:30:33.110 回答
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

于 2018-11-16T16:14:12.290 回答
1

在 3.9.8 版本中我尝试使用上面的代码，但发现 (graph) 有错误，通过更多搜索和尝试，我发现合适的是 (mxGraph.prototype)，所以这段代码应该是：

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

var mouseEvent = event.getProperty('event');
var selectedCell = event.getProperty('cell');
});
于 2018-08-02T12:17:36.320 回答