mxGraph中是否有内置方法可检测单元格或图片元素是否重叠

内置重叠检测API #

mxGraph提供两个原生API可直接用于重叠判断：

• mxGraph.getCellsOverlapping(cell1, cell2)：直接传入两个单元格实例，返回布尔值表示二者是否重叠，会自动忽略无几何信息的单元格，是最适配当前场景的内置方法
• mxUtils.intersects(rect1, rect2)：更底层的几何判断方法，传入两个mxRectangle实例，返回布尔值表示两个矩形是否相交，适合自定义几何范围的检测场景

具体实现逻辑（在cellsMoved中集成） #

步骤如下：

1. 触发cellsMoved时，先筛选当前画布内所有图片类型的单元格，排除连接线、文本框等非检测对象
2. 遍历所有移动的单元格，和其余所有图片单元格逐一做重叠校验
3. 对发生重叠的单元格，修改其strokeColor样式属性为红色；无重叠的单元格恢复默认边框色
4. 调用graph.refresh()或者graph.view.invalidate(cell)刷新目标单元格的渲染效果

参考代码：

// 重写cellsMoved方法
const originalCellsMoved = mxGraph.prototype.cellsMoved;
mxGraph.prototype.cellsMoved = function(cells, dx, dy, disconnect, constrain, extend) {
  // 先执行原生移动逻辑
  originalCellsMoved.apply(this, arguments);

  // 筛选所有图片类型的单元格，*可根据自己的业务标识调整筛选规则*
  const allImageCells = this.model.getCells().filter(cell => {
    return cell.style && cell.style.indexOf('image') !== -1;
  });

  // 先重置所有图片的边框为默认色，默认色可替换为你自己的配置
  allImageCells.forEach(cell => {
    this.setCellStyles('strokeColor', '#000000', [cell]);
  });

  // 两两校验重叠
  for (let i = 0; i < allImageCells.length; i++) {
    for (let j = i + 1; j < allImageCells.length; j++) {
      const isOverlap = this.getCellsOverlapping(allImageCells[i], allImageCells[j]);
      if (isOverlap) {
        // 重叠的两个单元格都设置红色边框
        this.setCellStyles('strokeColor', '#ff0000', [allImageCells[i], allImageCells[j]]);
      }
    }
  }
};

效果演示 #

内容的提问来源于stack exchange，提问作者Deepanshu