Attach text on path in Raphaël?

Question

Does anyone know how to attach a text to a path in Raphaël? Something like http://www.w3.org/TR/SVG11/images/text/toap02.svg I know that jQuery SVG can do that, but I can't find an easy way to do this by using Raphaël js. I want to attacht this text to a bezier curve and move it.

Answer 1

There are 2 ways to do this.

1. The easier way is to make use of the Raphael .print() method. This can turn text into paths. Each character gets its own path. Then you can iterate over each character and move and rotate it appropriately using .translate() and .angle().

2. The harder way is to implement text on path for both SVG and VML for a Raphael .text().

Here's a quick and rough start for Method 1 with no rotation using .print() and this font:

window.onload = function() {
    var i, newP,
        R = Raphael("canvas",500,400),

          // Create our set of letter paths
        t = R.print(100, 0, "this is a test", R.getFont("whoa"), 30),

          // Create the path to follow
        p = R.path("M 50 100 C 100 50 150 0 200 50 C 250 100 300 150 350 100" +
                   " C 400 50 450 50 450 50").attr("stroke", "none"),
        pLen = p.getTotalLength(), // Length of path to follow
        tLen = t.length,           // Number of characters
        oneL = pLen/tLen;          // Average length of 1 character
          // You can also use .getBBox() for each character instead       

      // Position each character
    for (i = 0; i < tLen; i++) {

          // Get x,y of the path to follow
        newP = p.getPointAtLength(i * oneL);

          // Move the letter
        t[i].translate((i * oneL)-newP.x, newP.y); 
        t[i].attr("fill", Raphael.getColor());
    }
};​

Try it out with this jsFiddle

Note: The above code is very rough and has some important positioning problems, but I think the general approach is the way to go for putting text on a path with Raphael.

Answer 2

raphael 2.1 print() function do not return a set of path any more, but a single path with all the letters. So all solutions here are not valid for raphael 2.1 (current version). I developed the following small plugin that adds the method printLetters() to paper, that prints letters individually and return a set, just like the old print() method. Also, the plugin supports aligning this text to a path. For example, for aligning a text on a path using the plugin you only need to do this:

var r = Raphael(0, 0, 500, 500);
var path1 = "M 50 100 C 100 50 150 0 200 50" +
    " C 250 100 300 150 350 100" +
    " C 400 50 450 50 450 50";
var text1 = r.printLetters(20, 150, "habia una vez una vaca",
        r.getFont("my underwood"), 30, null, null, path1).attr({
    fill : "red",
    stroke : "black"
});

And the plugin code is:

(function() {
    /**
     * do the job of putting all letters in a set returned bu printLetters in a path
     * @param p - can be a rpahael path obejct or string
     */
    var _printOnPath = function(text, paper, p) {
        if(typeof(p)=="string")
            p = paper.path(p).attr({stroke: "none"});
        for ( var i = 0; i < text.length; i++) {       
            var letter = text[i];
            var newP = p.getPointAtLength(letter.getBBox().x);
            var newTransformation = letter.transform()+
                 "T"+(newP.x-letter.getBBox().x)+","+
                (newP.y-letter.getBBox().y-letter.getBBox().height);       
            //also rotate the letter to correspond the path angle of derivative
            newTransformation+="R"+
                (newP.alpha<360 ? 180+newP.alpha : newP.alpha);
            letter.transform(newTransformation);
        }
    };

    /** print letter by letter, and return the set of letters (paths), just like the old raphael print() method did. */
    Raphael.fn.printLetters = function(x, y, str, font, size,
            letter_spacing, line_height, onpath) {
        letter_spacing=letter_spacing||size/1.5;
        line_height=line_height||size;
        this.setStart();
        var x_=x, y_=y;
        for ( var i = 0; i < str.length; i++) {
            if(str.charAt(i)!='\n') {
                var letter = this.print(x_,y_,str.charAt(i),font,size);
                x_+=letter_spacing;               
            }
            else {
                x_=x;
                y_+=line_height;
            }
        }
        var set = this.setFinish();
        if(onpath) {
            _printOnPath(set, this, onpath);
        }
        return set;
    };   
})();

Answer 3

this is the code based on raphael4gwt (java), but I think a javascript programmer can easily adapt it. It is based on raphael 2.0. It is similar to the sollution above but better. It uses transformation strings to absolutely position and rotate each letter to place it on the path:

/* make some text follow a path */
Font anchorFont = paper.getFont("Anchor Steam NF");
Set text1 = paper.print(120,330,"a text that follows a path", anchorFont, 40);

//the path where we want to place the text
Path p = paper.path(
    "M 50 100 C 100 50 150 0 200 50" +
" C 250 100 300 150 350 100" +
" C 400 50 450 50 450 50");
p.attr(Attrs.create().stroke("none"));//hide the path

/* for each letter, we add an absolute translation to its 
 * transformation string and also add an absolute rotation 
 * to correspond to path angle of derivative. */
for(int i = 0; i<text1.size(); i++) {
    Shape letter = text1.item(i);

    //get the point of a letter on the path
    Point newP = p.getPointAtLength(letter.getBBox().getX());

    String newTransformation = letter.getTransform()+                   
        "T"+(newP.getX()-letter.getBBox().getX())+","+
        (newP.getY()-letter.getBBox().getY()-letter.getBBox().getHeight());

    //also rotate the letter to correspond the path angle of derivative
    newTransformation+="R"+
        (newP.getAlpha()<360 ? 180+newP.getAlpha() : newP.getAlpha());

    letter.setTransform(newTransformation);         
}