How to center text along Kinetic.TextPath with kin

Question

Is there a way to center text along a path using Kinetic.TextPath in Kineticjs.

If not, does anyone know a workaround? I have explored the svg textpath option but not sure how to get this svg into kineticjs.

I have also tried to space the text manually using hair spaces but kineticjs seems to convert the character to a normal space eg. text.setText(String.fromCharCode(8202))

Answer 1

The standard textpath does not have centering of text along the path

I checked the source code here: github.com/ericdrowell/KineticJS/blob/master/src/plugins/… and there's nothing in the API to allow centering of text along a path. Is see you have tried the unsatisfying method of adding leading spaces. KineticJS has some very nice getXY-at-length-on-path functions that you could use to do it yourself. Text-on-path is made more complex because you have to account for rotation of the characters--a "K" will take up different width on the path based on how the curve requires the "K" to rotate.

See how it is done in the existing textpath here: https://github.com/ericdrowell/KineticJS/blob/master/src/plugins/TextPath.js

The findSegmentToFitCharacter function (starting line 177) is most instructive.

These relevant functions can be used to code a do-it-yourself centered textpath

Kinetic.Path.getLineLength
Kinetic.Path.getPointOnEllipticalArc
Kinetic.Path.getPointOnCubicBezier
Kinetic.Path.getPointOnQuadraticBezier

So what you'll have to do is:

• Determine the center XY of the path.
• Determine the center of your text (either by width or char-count)
• Draw the last half of your text forward from the centerpoint of the path.
• Draw the first half of your text (in reverse order) backward from the centerpoint of the path.

The findSegmentToFitCharacter nicely shows how to rotate each character at the appropriate angle.

Good coding! …and I would be interested if you care to share your finished results.

As an aside, whenever I dive into KineticJS source, I am always impressed by their code.