React-konva 用加权箭头连接两个节点

Posted

技术标签:

【中文标题】React-konva 用加权箭头连接两个节点【英文标题】:React-konva connect two nodes with a weighted arrow 【发布时间】:2020-01-04 21:41:22 【问题描述】:

我想在 react-konva 中创建一个加权有向图。到目前为止,我所做的是创建节点并使用Arrow 组件连接它们。下一步是在箭头上添加一个标签,表示边缘的权重。主要思想是将箭头和文本组件组合在一起。文本的位置将由箭头的中点定义。这已成功完成。当文本包含超过 1 个字符时会出现问题。我希望文本的中间位于箭头的中间。我尝试了不同的公式,但找不到任何解决方案。

我在codesandbox 上提供了一个活生生的例子。默认文本 0 按预期工作。现在,尝试使用不同的字符串,例如54856。您会看到字符串越长,Y 位置增加的越多。此外,文本不在不同位置的箭头中间居中。

该问题被标记为react-konva,但您不必知道库就可以做出贡献。在第 53 行,我们使用带有数学公式的变量来计算文本位置。如果您对几何学有足够的了解来解决它,我将非常乐意接受您的回答!

要更好地了解我的想法,请查看app。试着移动节点,看看箭头中的文字总是居中的。

【问题讨论】:

【参考方案1】:

解决方案可以简单得多。 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

【讨论】:

非常感谢。这个库的伟大之处以及您在其中所做的工作令人惊叹。

以上是关于React-konva 用加权箭头连接两个节点的主要内容,如果未能解决你的问题,请参考以下文章

redisdesktopmanager怎么连接有密码的redis

图有向和加权

在连接两个表时获得R中的加权平均值

如何使用加权采样连接数据?

神经网络

KonvaJS:如何用箭头连接两个形状?