Search code examples
htmlsvgkineticjs

Draw text centered on a curve svg using Kinetic.js

Let me try and explain...

I have a random string (may vary in length) which has to be drawn in a curve. It also has to be centered.

My current code: http://jsfiddle.net/ruPX5/

I used this svg data M70,70 A50,50 0 1,1 69,70 which creates a circle. As you can see, the text is curved, but not in the center.

I tried using arcs but I don't know how to create a perfect circle with it. Even if I did, I wouldn't know how to get the text in the center..

Is this possible? If so, how would you approach this?

Solution

  • Far from perfect, but it'll has to do for now

    I'm using rotation for positioning

    textpath.rotate(-Math.round(textpath.getTextWidth()/2)-10);

    see http://jsfiddle.net/8kwJm/