将元素设置到 canvas 中所有层的顶部

Question

我正在使用 KonvaJS 创建一个 canvas，它可以使用 'connections' 连接 'nodes'。我创建了 2 个 Layers、一个 NodeLayer 和一个 ConnectionLayer。我总是想在 ConnectionLayer 之上渲染 NodeLayer。所以它们呈现如下：

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

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

有没有办法在 connectionLayer 中的节点顶部呈现工具提示，同时不改变层的顺序？

Answer 1

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

<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} />
}

将元素设置到 canvas 中所有层的顶部

Set element to top of all layers in canvas

javascript

html5-canvas

konvajs

konvajs-reactjs