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