Write curved text within a circle with PaperJS

813 views Asked by At

The title basically outlines all the details of my problem. I'm trying to write text within a circle that curves with the outline of the circle. Something very similar to the image bellow. enter image description here

1

There are 1 answers

0
Waruyama On BEST ANSWER

You can actually do this with a little hack.

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 with 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 glyph 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:

enter image description here

You can use the code with an arbitrary path, not only with circles.