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

Question

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

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

该问题被标记为 react-konva，但您无需了解图书馆即可参与。在第 53 行，我们使用带有数学公式的变量来计算文本位置。如果你对几何有足够的了解来解决它，我很乐意接受你的回答！

为了更好地了解我的想法，请看一下这个 app。尝试四处移动节点并查看箭头中的文本始终居中。

Answer 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 用加权箭头连接两个节点

React-konva connect two nodes with a weighted arrow

html5-canvas

reactjs

konvajs

konvajs-reactjs

react-konva