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

Example output

（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

Rotating Text Exactly示例（在页面的右侧列中列出，或here in github）讨论了如何将文本放在一个精确的位置，以及像往常一样制作所需的额外步骤在IE工作。

它确实找到了文本的边界框;我想像将Jan提示的那样将文本移动到边界框的一半是直截了当的。

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

4 个答案: