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

Question

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

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

这个问题被称为react-konva，但你不需要知道要贡献的库。在第53行，我们使用变量和数学公式来计算文本位置。如果你知道足够的几何知识来解决它，我将非常乐意接受你的答案！

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

Answer 1

解决方案可以简单得多。Konva可以将文本水平和垂直居中对齐。所以你可以只计算直线的中心。然后，只需使用一些宽度移动文本，并设置宽度和高度= 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