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

问题描述

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

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

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

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

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

解决方法

是的。你可以只读取父组的位置，并申请创建的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"));

konvajs react-konva