mxgraph - 使用 mxCellHighlight 突出显示多个单元格

Question

我想在 chromeless 模式下突出显示 draw.io 图中的一系列单元格。目标是说明一条包含顶点和边的路径:

使用辅助类 mxCellHighlight ，我基本上是在尝试以下操作:

var highlight = new mxCellHighlight(graph, '#ff0000', 2);
highlight.highlight(graph.view.getState(cell1)));
highlight.highlight(graph.view.getState(cell2)));
...

这不起作用，一次只有一个单元格被突出显示。我知道当单元格的当前根更改时 resetHandler 隐藏突出显示标记，但不幸的是我未能正确覆盖它以防止这种影响。
非常感谢任何帮助，谢谢。

Answer 1

mxCellHighlight 只能突出显示 一个单元格 。你可以简单地查看它的源代码，它是 quite small ( related lines )
所以，我可以想到以下选项:
创建多个亮点，如下所示:

var h1 = new mxCellHighlight(graph, '#ff0000', 2);
h1.highlight(graph.view.getState(cell1)));
var h2 = new mxCellHighlight(graph, '#ff0000', 2);
h2.highlight(graph.view.getState(cell2)));

如果需要，您可以将它们保存在数组中以便稍后重置。完全无效，但很简单。或者您可以修改类以支持多种形状。但这可能会更复杂，基本上它似乎和从头开始编写一样好。
或者，您可以尝试 选择 形状，并通过更改一些常量将选择样式更改为“突出显示”。如果您不关心选择，这可以工作。查看您可以重新定义 here 的常量列表。基本上，我的意思是这样的:

mxConstants.HANDLE_SIZE = 0;
mxConstants.VERTEX_SELECTION_COLOR = '#00ff0080';
mxConstants.EDGE_SELECTION_COLOR = '#00ff0080';
mxConstants.EDGE_SELECTION_STROKEWIDTH = 2;
mxConstants.VERTEX_SELECTION_STROKEWIDTH = 2;
mxConstants.VERTEX_SELECTION_DASHED = false;
mxConstants.EDGE_SELECTION_DASHED = false;

graph.getSelectionModel().setCells([cell1, cell2]);

或者，您可以不作弊并修改单元格渲染器(我猜在您的情况下是 mxSvgCanvas2D.prototype.rect )，这取决于您的形状，将渲染高光。这可能有点复杂，但通过这种方式，您将能够使用样式(“突出显示”)控制形状，因此您只需在样式代码中设置该值，然后从渲染器中读取，然后例如添加 svg 过滤器(使用真实的
"glow" effect ，如果你想要的话)。