javascript - 将元素设置为 Canvas 中所有图层的顶部

我正在使用KonvaJS创建可以通过使用“连接”来连接“节点”的画布。我创建了2个Layers，一个NodeLayer和一个ConnectionLayer。我一直想在NodeLayer上方渲染ConnectionLayer。因此，它们呈现如下：

<Stage>
    <ConnectionLayer />
    <NodeLayer />
</Stage>

这样可以确保节点始终呈现在连接顶部。我正在尝试在连接上添加工具提示，但是由于NodeLayer位于connectionLayer上方，因此当工具提示位于节点后面时不会显示。

有没有一种方法可以在不更改图层顺序的情况下在connectionLayer内部的节点顶部呈现工具提示？

最佳答案

如评论中所述，您可以尝试使用HTML作为工具提示，并将其以绝对位置放置在画布顶部。
或者，您可以创建一个特殊的组件以显示工具提示并将其放置在所有组件之上：

<Stage>
    <ConnectionLayer />
    <NodeLayer />
    {this.state.tooltip && <TooltipLayer />}
</Stage>

或者，您可以尝试将工具提示节点手动移动到另一个顶层。基本上不建议在react-konva中使用该方法，但在许多情况下它可能会起作用（我在生产应用程序中亲自使用了该方法）。

const Tooltip = () => {

  const groupRef = React.useRef();

  // move it when the component is mounted
  React.useEffect(() => {
     const stage = groupRef.current.getStage();
     const topLayer = stage.children[stage.children.length - 1];
     groupRef.current.moveTo(topLayer);
  }, []);

  return <Group ref={groupRef} />
}