Javascript Raphael.js在路径上居中显示文本

我所拥有的： 沿圆形路径的文本。它使用Raphael.js和一个名为textOnPath的函数，可在此处找到：：

JSFiddle：

我需要的是： 要在圆圈顶部居中的文本

我的做法： 尝试根据圆弧大小和文字宽度计算文字的起始位置。我试图通过使用text函数创建它的不可见克隆来计算文本宽度，并得到它的BBox宽度

它不太管用，结果因web浏览器、使用的字体以及字母和空格的数量而异：

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：

---

有人能给我指出正确的方向吗？

IMHO，最简单的方法是创建额外的辅助路径，该路径将文本大小提高一半

此外，我发现定义一个圆，然后以指定角度获取点更方便：

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)
      }
   }
};

---

你不需要用pi做任何特定于弧的事情；messageLength、path.getTotalLength和path.getPointAtLength应该是您所需要的全部-应该更简单，可以在任何路径上工作，而不仅仅是圆弧。我添加了一个JSBIN，它在解决这个问题的过程中占了75%，并考虑了还需要做哪些工作。

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)
      }
   }
};