Raphael js文本定位：将文本居中放置在一个圆圈中

Question

我正在使用 Raphael js 绘制带圆圈的数字。问题是每个数字都有不同的宽度/高度，因此使用一组坐标将文本居中是行不通的。 IE、FF 和 safari 之间的文本显示不同。是否有一种动态方法来查找数字的高度/宽度并相应地将其居中？

这是我的测试页面：

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

非常感谢！

Answer 1

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

这里的“居中”意味着 paper.text() 方法的 x, y 参数期望文本边界框的中心。

因此，只需指定与圆相同的 x、y 值即可产生所需的结果：

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

(jsFiddle)

相关源代码：

• 负责垂直对齐的源代码行
• 负责水平对齐的源代码行

Answer 2

也许这个：

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

Answer 3

使用此属性：'text-anchor':'start'：

paper.text( x, y, text ).attr( {'text-anchor':'start'} );

Answer 4

精确旋转文本示例（在页面的右侧列中列出，或 < a href="https://gist.github.com/265480" rel="nofollow">github 中的此处），讨论将文本放在精确的位置，以及像往常一样，制作所需的额外步骤IE 中一切正常。

它确实找到了文本的边界框；我想按照 Jan 的建议，将文本移动边界框的一半是很简单的。