1

I want to create a weighted directed graph in react-konva. What I have achieved so far is to create the nodes and connect them using an Arrow component. The next step is to add a label on the Arrow which will represent the weight of the edge. The main idea is to group the arrow and the text components together. The position of the text will be defined by the middle point of the arrow. This was done successfully. The problem occurs when the text contain more than 1 characters. I want the middle of text to be positioned in the middle of the arrow. I tried different formulas but could not find any solution.

I provide a live example on codesandbox. The default text 0 works as expected. Now, try to use a different string like 54856. What you will see is that the more lengthy is the string, the more the Y position increases. Also the text is not centered in the middle of the arrow across different positions.

The question is taged as react-konva but you don't have to know the library to contribute. In line 53 we have the variable with the math formula to calculate the text position. If you know enough about geometry to solve it, I would more than happy to accept your answer!

To get a better idea on what I have in mind, take a look at this app. Try to move the nodes around and see that the text in the arrow is always centered.

HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
Charles Nikolopoulos
  • 35
  • 4

1 Answers1

2

The solution can be much simpler. Konva can align text in the center horizontally and vertically. So you can just calculate the center of the line. Then just move text with some offset and set width and height = 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}
/>

Demo: https://codesandbox.io/s/react-konva-weighted-arrow-0g4ij

lavrton
  • 18,973
  • 4
  • 30
  • 63