拉斐尔js文字定位：将文字置于一个圆圈中

我正在使用拉斐尔js绘制圆圈数字。问题是每个数字都有不同的宽度/高度，因此使用一组坐标来居中文本不起作用。文本在IE，FF和Safari之间显示不同。有没有一种动态的方式来查找数字的高度/宽度并相应地居中？拉斐尔js文字定位：将文字置于一个圆圈中

这里是我的测试页：

http://jesserosenfield.com/fluid/test.html

和我的代码：

function drawcircle(div, text) { 
    var paper = Raphael(div, 26, 26); //<< 
    var circle = paper.circle(13, 13, 10.5); 
    circle.attr("stroke", "#f1f1f1"); 
    circle.attr("stroke-width", 2); 
    var text = paper.text(12, 13, text); //<< 
    text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'}); 
    text.attr("fill", "#f1f1f1"); 
} 

window.onload = function() { 
    drawcircle("c1", "1"); 
    drawcircle("c2", "2"); 
    drawcircle("c3", "3"); 
};

非常感谢！

来源

2010-03-30 j-man86

也许这：

var paper = Raphael(div, 26, 26); //<< 
var circle = paper.circle(13, 13, 10.5); 
circle.attr("stroke", "#f1f1f1"); 
circle.attr("stroke-width", 2); 
var text = paper.text(0, 0, text); //<< 
text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'}); 
text.attr("fill", "#f1f1f1"); 
text.translate((35 - text.getBBox().width)/2, (45 - text.getBBox().height)/2);

来源

2010-04-03 21:42:49

此代码的输出看起来更好：text.translate（paper.width/2，paper.height/2）; – 2010-04-05 15:23:16

'text.getBBox（）。width'不工作，因为它总是返回0 :( – stej 2010-12-07 10:31:10

的Rotating Text Exactly示例（在页面的右侧列中列出，或here in github），讨论了将文本在一个精确的位置，以沿着作为需要往常一样，额外的步骤使事情在IE中起作用。

它确实找到文本的边界框;按照Jan的建议，我认为将文本移动一半的边界框很简单。

来源

2010-12-09 23:11:18

（答案改写）：默认情况下，Raphael.js将文本节点水平和垂直居中。

这里的“居中”意味着paper.text（）方法的x，y参数需要文本边界框的中心。

所以，仅仅指定相同的x，y的值作为圆应该产生所期望的结果：

var circle = paper.circle(13, 13, 10.5); 
var text = paper.text(13, 13, "10");

Example output

（jsFiddle）

拉斐尔js文字定位：将文字置于一个圆圈中

回答

相关问题