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

Question

我想在无镶边模式下突出显示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只能突出显示一个单元格。你可以简单地查看它的源代码，它非常小（相关行）

所以，我可以想到以下选项：

创建多个亮点，如下所示：

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)));

如果需要，您可以将它们保存在数组中以便稍后重置。完全无效，但很简单。或者您可以修改类以支持多种形状。但这可能会更复杂，基本上看起来和从头开始编写一样好。

或者，您可以尝试选择形状，并通过更改一些常量将选择样式更改为看起来像“突出显示”。如果您不关心选择，这可以起作用。查看可以在此处重新定义的常量列表。基本上，我的意思是这样的：

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 滤镜（ 如果需要，可以使用真正的“发光”效果）。