reactjs - React-konva 用加权箭头连接两个节点
问题描述
我想在 react-konva 中创建一个加权有向图。到目前为止,我所做的是创建节点并使用Arrow
组件连接它们。下一步是在箭头上添加一个标签,表示边缘的权重。主要思想是将箭头和文本组件组合在一起。文本的位置将由箭头的中点定义。这已成功完成。当文本包含超过 1 个字符时会出现问题。我希望文本的中间位于箭头的中间。我尝试了不同的公式,但找不到任何解决方案。
我提供了一个关于代码沙箱的活生生的例子。默认文本0
按预期工作。现在,尝试使用不同的字符串,例如54856
. 您会看到字符串越长,Y 位置增加的越多。此外,文本不在不同位置的箭头中间居中。
该问题被标记为,react-konva
但您不必知道库就可以做出贡献。在第 53 行,我们使用带有数学公式的变量来计算文本位置。如果您对几何学有足够的了解来解决它,我将非常乐意接受您的回答!
要更好地了解我的想法,请查看此应用程序。尝试移动节点并查看箭头中的文本始终居中。
解决方案
解决方案可以简单得多。Konva
可以水平和垂直对齐居中的文本。所以你可以只计算线的中心。然后只需移动一些文本offset
并设置宽度和高度 = offset * 2
。
<Text
fill="red"
x={(node1.x + node2.x) / 2 - 100}
y={(node1.y + node2.y) / 2 - 100}
width={200}
height={200}
align="center"
verticalAlign="middle"
text={text}
/>
演示:https ://codesandbox.io/s/react-konva-weighted-arrow-0g4ij
推荐阅读
- c# - 如何从 Foreach 循环中访问隐藏输入的值?
- scala - 在 Scala 中使用自定义对象迭代 java.util.Map
- ruby-on-rails - 定义一个嵌套的 has_many 和 belongs_to
- amazon-web-services - 无法创建 aws ec2 证书。正文不得包含私钥
- vba - 功能区 onLoad 子中的 ActiveDocument 错误 4248
- azure - 以特定用户身份在系统启动时运行批处理脚本,即使该用户未登录
- javascript - 调整窗口大小时如何触发功能?
- excel - 如何为B列中的56个单元格着色
- concurrency - C++Amp 在构建/执行之前是否需要 GPU 硬件?
- google-chrome-extension - 如何在我的 chrome 浏览器中获取当前 TAB 的 URL 和标题,并在用户单击我的扩展程序图标时显示它