Raphael.js centered text on path

问题

What I have: Text along a path made out of circle. It uses Raphael.js and a function called textOnPath (found here: Raphael JS Text Along path ):

var pathTest = r.path(getCircletoPath(286, 322, radius)).attr({stroke:"#b9b9b9"});
textOnPath(message, pathTest, fontSize, fontSpacing, kerning, kerning, point, textFill, fontNormal, fontFamily);

JSFiddle: http://jsfiddle.net/zorza/62hDH/1/

What I need: The text to be centered on top of the circle.

My approach: Try to calculate where the text should start depending on the arc size and text width. I tried to calculate the text width by creating it's invisible clone with text() function and get it's BBox width.

It doesn't quite work and the results vary depending on the web browser, font used and number of letters and spaces:

var length = r.text(100,400,message)
.attr({"font-size":fontSize,'opacity': 0, 'font-family': fontFamily})
.getBBox()
.width;

var point = (Math.PI*radius - length*fontSpacing)/2;

JSFiddle: http://jsfiddle.net/zorza/k8vBy/3/

Could anyone point me in the right direction?

回答1:

The easiest way, IMHO, is to create additional helper path that is raised by half of text size. http://jsfiddle.net/p84VQ/

Also, I find it a bit more convenient to define a circle and then get points at specified angle:

var Circle = function(cx, cy, r) {
   return function (a) {
      return {
         x: cx + r*Math.sin(Math.PI*-a/180),
         y: cy - r*Math.cos(Math.PI*-a/180)
      }
   }
};

来源：https://stackoverflow.com/questions/20047029/raphael-js-centered-text-on-path

标签

javascript

raphael