时间戳

首页 > 解决方案 > 将元素设置为画布中所有图层的顶部

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

问题描述

我正在使用 KonvaJS 创建一个可以使用“连接”连接“节点”的画布。我创建了 2 Layers、 1NodeLayer和 1 ConnectionLayer。我总是想NodeLayer在ConnectionLayer. 因此它们呈现如下：

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

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

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

标签： javascripthtml5-canvaskonvajskonvajs-reactjs

解决方案

  1. 正如评论中提到的，您可以尝试使用 HTML 作为工具提示并将其以绝对位置放置在画布顶部。

  2. 或者您可以创建一个特殊的组件来显示工具提示并将其放在所有组件的顶部：

<Stage>
    <ConnectionLayer />
    <NodeLayer />
    {this.state.tooltip && <TooltipLayer />}
</Stage>
  1. 或者您可以尝试将工具提示节点手动移动到另一个顶层。基本上不建议使用该方法，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} />
}

推荐阅读