html - Raphael js文本定位: centering text in a circle

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 )

相关源码:

• source line responsible for vertical alignment
• source line responsible for horizontal alignment