Search code examples
javascriptpaperjs

Write curved text within a circle with PaperJS

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

Solution

  • 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.