Draw text along the bezier curve in paper.js

Question

Is it possible to easily draw text along the bezier curve using paper.js?

I know it is possible to attach text to a line path and then rotate it, but I am interested specifically in drawing text along the curve. Something like http://www.w3.org/TR/SVG11/images/text/toap02.svg

I understand this may be achieved by printing text a letter by letter with corresponding rotation applied to every item, but I am interested in easier way to achieve this in paper.js

Sverdlovsk

Answer 1

We haven't implement text along path in Paper.js yet. At the moment, text support is rather rudimentary, but this will hopefully change soon once we have rolled out version 1.0 of the library.

Livvie

Is there any updates regarding proper text support in paperjs ? I have been waiting for it for a very long time. – Claudie

Answer 2

As mentioned in the previous answer, PaperJS does not offer this functionality out of the box. But You can achieve the effect with very little effort.

Here is how to proceed:

1. Get the offset to the x-center of each glyph in the text. This can be done by using the width of a PointText for the substring until the glyph.
2. Find the point for the offset on the path that you want your text to align to.
3. Place the single centered glyph at the just found point. Rotate the glph by the path's tangent angle.

Here is the Paper Sketch: Align Text to Path Sketch

And here is the result of a simple test:

You can move the PointText objects of the glyphs along the y-axis before applying the rotation to achieve the offset from the path (like the red text in your example).

Baylor