将元素设置为画布中所有图层的顶部答案

【问题标题】：Set element to top of all layers in canvas将元素设置为画布中所有图层的顶部
【发布时间】：2019-12-24 14:54:59
【问题描述】：

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

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

这确保节点始终呈现在连接之上。我正在尝试在我的连接上添加一个工具提示，但是因为NodeLayer 在connectionLayer 的顶部，所以当它位于节点后面时，工具提示不会显示。

有没有办法在不改变层顺序的情况下从connectionLayer 内的节点顶部呈现工具提示？

【问题讨论】：

也许使用 HTML 来显示工具提示，有一个通知层，或者告诉节点层来呈现工具提示？

标签： javascript html5-canvas konvajs konvajs-reactjs

【解决方案1】：

正如评论中提到的，您可以尝试使用 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} />
}

【讨论】：