Raphael.js将文本居中放置在路径上

Raphael.js centered text on path

本文关键字：路径 js 文本 Raphael      更新时间：2023-09-26

我所拥有的：沿圆形路径的文本。它使用Raphael.js和一个名为textOnPath的函数（可在此处找到：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/

我需要什么：要在圆顶部居中的文本。

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

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

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/

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

IMHO最简单的方法是创建额外的辅助路径，该路径的大小是文本大小的一半。http://jsfiddle.net/p84VQ/

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

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)
      }
   }
};
相关文章：