Konvajs (react-konva) dom 门户相对于父组的位置答案

【问题标题】：Konvajs (react-konva) dom portal position relative to parent groupKonvajs (react-konva) dom 门户相对于父组的位置
【发布时间】：2021-06-27 21:56:34
【问题描述】：

我有一个包含门户的 Konva 组，这样我就可以渲染 HTML Dom 元素，如下所示： https://konvajs.org/docs/react/DOM_Portal.html

在我的门户中，我有一个 Wavesufer.js 波形。

有没有办法让门户中的 dom 元素不是绝对位置？换句话说，让他们在当前的 konva 组内？这样，如果我拖动我的 konva 组，门户就会留在里面并跟随它。

到目前为止我还没有运气......

现在我的波形组溢出到画布之外，包含它的 konva 组保持隐藏（并且滚动条添加到容器 - 很好）但 dom 波形保持在顶部并且溢出没有隐藏，它保持在顶部可见并溢出 konva 容器。

【问题讨论】：

我是否理解正确，您只是想创建一个跟随组位置的 DOM 元素？

标签： konvajs react-konva

【解决方案1】：

是的。您可以只读取父组的位置，并将创建的 DOM 元素申请到相同的位置。

或者你可以使用react-konva-utils library中的Html组件

import React from "react";
import ReactDOM from "react-dom";
import { Html } from "react-konva-utils";
import { Stage, Layer, Rect } from "react-konva";

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Group x={50} y={50}>
          <Html>Square</Html>
          <Rect x={0} y={0} width={50} height={50} fill="red" shadowBlur={5} />
        <Group>
      </Layer>
    </Stage>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

【讨论】：