Html Raphael js 文本定位：将文本以圆圈为中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2547927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Raphael js text positioning: centering text in a circle
提问by HandiworkNYC.com
I am using Raphael js to draw circled numbers. The problem is that each number has a different width/height so using one set of coordinates to center the text isn't working. The text displays differently between IE, FF, and safari. Is there a dynamic way to find the height/width of the number and center it accordingly?
我正在使用 Raphael js 绘制带圆圈的数字。问题是每个数字都有不同的宽度/高度，因此使用一组坐标使文本居中是行不通的。IE、FF 和 safari 之间的文本显示不同。是否有一种动态方法可以找到数字的高度/宽度并相应地将其居中？
Here is my test page:
这是我的测试页面：
http://jesserosenfield.com/fluid/test.html
http://jesserosenfield.com/fluid/test.html
and my code:
和我的代码：
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");
};
Thanks very much!
非常感谢！
回答by ento
(Answer rewritten): Raphael.js centers text nodes both horizontally and vertically by default.
（答案重写）：默认情况下，Raphael.js 将文本节点水平和垂直居中。
"Centering" here means that the x, y argument of paper.text() method expects the center of the text's bounding box.
“居中”在这里意味着 paper.text() 方法的 x, y 参数期望文本边界框的中心。
So, just specifying the same x, y value as the circle should produce the desired result:
因此，只需指定与圆相同的 x, y 值即可产生所需的结果：
var circle = paper.circle(13, 13, 10.5);
var text = paper.text(13, 13, "10");
(jsFiddle)
( jsFiddle)
Relevant source code:
相关源码：
回答by Jan Tojnar
Maybe this:
也许这个：
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);
回答by Jan Tojnar
Use this attribute: 'text-anchor':'start':
使用这个属性'text-anchor':'start'：
paper.text( x, y, text ).attr( {'text-anchor':'start'} );
回答by Clinton Blackmore
The Rotating Text Exactlyexample (listed in the right-hand column of the page, or here in github), discusses putting text in a precise position, along with, as usual, extra steps required to make things work in IE.
该旋转文本完全例如（在页面的右边栏中列出，或在github上这里），讨论了把文字的精确位置，随着像往常一样，额外的步骤需要把事情的工作在IE中。
It does find a bounding box for the text; I imagine it is straightforward to move the text by half the bounding box as Jan suggested.
它确实找到了文本的边界框；我想像 Jan 建议的那样将文本移动边界框的一半很简单。
