如何解决Konvajs (react-konva) dom 门户相对于父组的位置
我有一个包含门户的 Konva 组,以便我可以呈现 HTML Dom 元素,如下所示: https://konvajs.org/docs/react/DOM_Portal.html
有什么办法可以让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"));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。