Nonsense Parser Microframework

    textpath

    1.0.2 • Public • Published

    textpath

    Renderer agnostic utility for drawing text along a path.

    Getting started

    The ES2015 way

    To add the dependency to your project, run

    npm install --save textpath
    

    To use in your code, type

    import textPath from 'textpath';

    The vanilla JavaScript way

    Include the following script tag in your HTML:

    <script src="http://unpkg.com/textpath/dist/textpath.js"></script>

    API

    textPath

    To render text to a CanvasRenderingContext2D, use something like the following code:

    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
     
    var path = [[20, 33], [40, 31], [60, 30], [80, 31], [100, 33]];
     
    function measureText(text) {
      return ctx.measureText(text).width;
    }
     
    function draw(letter, x, y, angle) {
      ctx.save();
      ctx.translate(x, y);
      ctx.rotate(angle);
      ctx.fillText(letter, 0, 0);
      ctx.restore();
    }
     
    textPath('My text path :-)', path, measureText, draw);

    Parameters

    • text string Text to draw along the path.
    • path Array<Array<number>> Path represented in coordinate pairs.
    • measure Function Function that takes a text as argument and returns the width of the provided text.
    • draw Function Function that takes a letter, its x coordinate, y coordinate and angle (in radians) as arguments. It is typically used to draw the provided letter to a canvas.
    • textAlign string Text alignment along the path. One of 'left', 'center', 'right'. (optional, default 'center')

    Install

    npm i textpath

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    BSD-2-Clause

    Last publish

    Collaborators

    • avatar