Raphael.js 在路径上居中文本 [英] Raphael.js centered text on path

问题描述

我所拥有的:沿由圆形构成的路径的文本.它使用 Raphael.js 和一个名为 textOnPath 的函数(在此处找到:Raphael JS Text沿路径 ):

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.

我的方法:尝试根据弧线大小和文本宽度计算文本应该从哪里开始.我试图通过使用 text() 函数创建它的不可见克隆并获取它的 BBox 宽度来计算文本宽度.

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?

推荐答案

恕我直言，最简单的方法是创建增加一半文本大小的附加帮助程序路径.http://jsfiddle.net/p84VQ/

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

这篇关于Raphael.js 在路径上居中文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！