我拥有的: 沿着由圆圈组成的路径的文本。它使用 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/
有人能给我指出正确的方向吗?
最佳答案
恕我直言,最简单的方法是创建额外的辅助路径,将文本大小提高一半。 http://jsfiddle.net/p84VQ/
另外,我发现定义一个圆然后在指定 Angular 获取点更方便:
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)
}
}
};
关于javascript - Raphael.js 在路径上居中放置文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20047029/