JointJS/Rappid技术问题：Manhattan路由下箭头显示异常及底层Cell适配

这个问题我之前也碰到过，Manhattan路由的箭头显示异常通常是因为层级渲染的优先级冲突——当你用cell.toBack()把背景Cell压到最底层时，链接的箭头元素可能没有被正确提升到背景之上。给你几个靠谱的解决方案：

方案1：用图层分离背景和交互元素（最推荐） #

把背景Cell单独放到一个底层图层，所有链接、节点等交互元素放到上层图层，从根源上解决层级冲突：

// 创建专门的背景图层
const backgroundLayer = new mxLayer();
// 将背景图层添加到画布并设置为最底层
graph.addLayer(backgroundLayer);
graph.orderLayer(backgroundLayer, 0); // 0代表最底层位置

// 将你的浅蓝色背景Cell添加到背景图层
backgroundLayer.add(yourBackgroundCell);

这样上层默认图层里的所有链接（包括Manhattan路由的箭头）都会自动显示在背景之上，完全不会被遮挡。

方案2：强制提升所有链接的层级 #

如果不想改图层结构，可以在调用cell.toBack()后，遍历所有链接并设置它们的层级高于背景Cell：

// 先把背景Cell置底
yourBackgroundCell.toBack();
// 获取画布所有链接
const links = graph.getModel().getEdges();
// 遍历设置链接层级高于背景Cell
links.forEach(link => {
  link.setZIndex(yourBackgroundCell.getZIndex() + 1);
});

这个方法直接确保链接的渲染优先级比背景Cell高，箭头自然就能正常显示了。

方案3：自定义Manhattan路由器的箭头渲染 #

如果上面两种方法都不生效，可能是Manhattan路由器的箭头绘制逻辑有特殊处理，可以自定义路由器，强制箭头绘制在最上层：

// 继承原Manhattan路由器，重写箭头绘制逻辑
class CustomManhattanRouter extends mxManhattanRouter {
  paintEdgeShape(graph, edge, pts, sourceState, targetState) {
    // 先调用父类方法绘制路径
    super.paintEdgeShape(graph, edge, pts, sourceState, targetState);
    // 手动绘制箭头，确保在顶层
    const ctx = graph.getView().getGraphicsContext();
    const arrowSize = graph.getArrowSize();
    ctx.save();
    ctx.globalCompositeOperation = 'source-over'; // 确保箭头覆盖在所有元素之上
    // 复制原Manhattan路由器的箭头绘制逻辑
    const n = pts.length;
    const p0 = pts[n - 2];
    const p1 = pts[n - 1];
    const dx = p1.x - p0.x;
    const dy = p1.y - p0.y;
    const len = Math.sqrt(dx * dx + dy * dy);
    const unitX = dx / len;
    const unitY = dy / len;
    const arrowX = p1.x - arrowSize * unitX;
    const arrowY = p1.y - arrowSize * unitY;
    const perpX = -unitY * arrowSize / 2;
    const perpY = unitX * arrowSize / 2;
    
    ctx.beginPath();
    ctx.moveTo(p1.x, p1.y);
    ctx.lineTo(arrowX + perpX, arrowY + perpY);
    ctx.lineTo(arrowX - perpX, arrowY - perpY);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
  }
}

// 替换默认的Manhattan路由器
graph.setRouter(new CustomManhattanRouter());

这个方法比较复杂，适合需要深度定制路由效果的场景，一般前两个方案就能解决问题。

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