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

Posted 2023-03-05

【中文标题】Raphael js 文本定位：将文本居中在一个圆圈中

【英文标题】：Raphael js text positioning: centering text in a circle

【发布时间】：2011-02-02 15:00:36

【问题描述】：

我正在使用 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");
;

非常感谢！

【参考方案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

【参考方案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);

【讨论】：

这段代码的输出看起来更好：text.translate(paper.width/2, paper.height/2);

text.getBBox().width 不起作用，因为它总是返回 0 :(

【参考方案3】：

使用这个属性：'text-anchor':'start':

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

【讨论】：

谢谢！这太有用了。在 raphaels SVG 中对齐文本时遇到了很多麻烦，但多亏了这个，我所有的问题都消失了！你摇滚：D

【参考方案4】：

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

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