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

【问题标题】：Highlight multiple cells using mxCellHighlight使用 mxCellHighlight 突出显示多个单元格
【发布时间】：2021-03-28 01:33:00
【问题描述】：

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

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

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

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

非常感谢任何帮助，谢谢。

【问题讨论】：

标签： mxgraph draw.io

【解决方案1】：

正如@Nikolay 所解释的，mxCellHighlight 是突出显示单个单元格：它为您要突出显示的单元格添加一个额外的形状并管理侦听器（鼠标进入/离开）。您还可以检查 mxCellTracker 和 mxCellMarker 是否能满足您的需求。

高亮可以看作是改变单元格的样式，所以你可以直接在模型上改变单元格的样式。假设您知道要突出显示的单元格，即您有一个单元格数组，您可以执行以下操作以使用 https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/util/mxUtils.js#L3430

更新单元格不透明度

const cells = []; // the cells you want to highlight

graph.getModel().beginUpdate(); // required if you want to apply the highlight to all cells in a single transaction
  try {
    mxUtils.setCellStyles(graph.getModel(), cells, 'opacity', 20);
  } finally {
    // Updates the display
    graph.getModel().endUpdate();
  }

注意mxUtils.setCellStyles 管理一个内部事务，只允许更改单个样式键/值。因此，您可能需要多次调用mxUtils.setCellStyles 或复制https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/util/mxUtils.js#L3453 中设置样式键/值的逻辑，或者创建专用样式并将其直接应用于model.setStyle(cells[i], style) 的单元格。 mxUtils 提供了几个函数来更新字符串或数组的样式，以帮助您解决该主题。

要删除应用的样式，您可能必须保留未突出显示的样式值才能在以后重新应用它。

我已使用此技术突出显示路径，如下面的截屏视频所示（路径，即到 hightligh 的单元格是在鼠标输入时计算的，并由图形鼠标侦听器 https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/mxGraph.js#L12628 管理）

https://github.com/tbouffard/mxgraph-js-playground/pull/1 中提供的代码（丑，这是一个 POC）

截图内容

首先突出显示一个单元格（红色）并对其应用叠加层，然后将其移除
第二次激活路径检测：检测路径的细胞上的细胞不透明度发生变化

【讨论】：

不幸的是，无法拆分赏金，因此我将其分配给@Nikolay，他的简单方法更适合我的要求。无论如何，感谢您的详细回答，@redfish4ktc！
好的，没问题，至少，以后可能对别人有帮助。

【解决方案2】：

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，如果你想要的话）。

【讨论】：