Draw text along the bezier curve in paper.js

后端 未结 2 903
旧巷少年郎
旧巷少年郎 2021-02-06 12:49

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 spe

2条回答
  •  执笔经年
    2021-02-06 13:05

    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:

    enter image description here

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

提交回复
热议问题