How to get Konva.TextPath width considering additional parameters

Question

Good day, reader.

I am trying to create curved text with dynamic path using Konva, so I am transferring Konva.Text to Konva.TextPath, adding to Text attrs calculated path (code sample is written in the end), although I can't get Konva.TextPath's right width taking into consideration additional parameters listed below. I tried this methods`

textNode.textwidth
textNode.width()
textNode.textWidth()
textNode.getClientRect().width // wrong size when curved

The most close to what I want is 3th option (it seems that it's same as 1st?).

Is there anyway to get width of Konva.TextPath considering also parameters like `

font,
font-size,
letter-spacing,

I read documentation, looked through stackoverflow, but couldn't find any way. Is there something I'm missing out ?

function redraw(originTextNode: Konva.Text | Konva.TextPath)
   const textWidth = textNode.textWidth();
   const calcedNewPath = calcNewPath({...other, textWidth })

   const textNode = Konva.TextPath({
     ...originTextNode.getAttrs(),
     data: calcedNewPath,
});

Thanks

Can you clary why exactly do you need a width? And what is "additional parameters" for you? letterSpacing? — lavrton, Dec 16 '20 at 19:41
Sorry, I updated question, parameters are listed. Width is used to calculate radius, which I use in svg path (using A command). If there is anything else to clarify, I'll be happy to, thanks — Davit Mkrtchyan, Dec 17 '20 at 06:31
Is this any random path or can we scope it down to say rectangles or ellipses ? — Vanquished Wombat, Dec 17 '20 at 14:37
No it's not random path, it's circle with 359 degree, radius depends on text width — Davit Mkrtchyan, Dec 17 '20 at 20:13

score 2 · Accepted Answer · answered Dec 17 '20 at 20:52

2

You can use textPath.getTextWidth() to get width of the text without letterSpacing adjustments. It will include fontFamily (if font is loaded) and fontSize. If you want to apply letterSpacing to that value you can do this:

var fullWidth = textPath.getTextWidth() + (textPath.text().length - 1) * letterSpacing;

The actual length of the rendered text path can be still a bit different compared to the length of the path.

answered Dec 17 '20 at 20:52

lavrton

18,973
4
30
63

Thanks for answer, I will try this out! – Davit Mkrtchyan Dec 17 '20 at 20:58

How to get Konva.TextPath width considering additional parameters

1 Answers1