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

Question

我有一个包含门户的 Konva 组，因此我可以像这样呈现 HTML Dom 元素： https://konvajs.org/docs/react/DOM_Portal.html

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

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

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

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

Answer 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"));

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

Konvajs (react-konva) dom portal position relative to parent group

konvajs

react-konva