代码之家 › 专栏 › 技术社区 › HandiworkNYC.com

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

centering raphael css html

21

HandiworkNYC.com · 技术社区 · 16 年前

我用拉斐尔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");
};

非常感谢!

4 回复 | 直到 16 年前

1

32

ento matt 14 年前

(答案改写):拉斐尔。默认情况下,js将文本节点水平和垂直居中。

这里的“居中”是指纸张的x,y参数。text()方法需要文本边界框的中心。

因此,只需指定与圆相同的x,y值,就可以产生所需的结果:

var circle = paper.circle(13, 13, 10.5);
var text = paper.text(13, 13, "10");

Example output

( jsFiddle )

相关源代码:

2

9

Jan Tojnar 16 年前

也许是这样:

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

3

Grzegorz RoÅ¼niecki 13 年前

使用此属性: 'text-anchor':'start' :

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

4

0

Clinton Blackmore 15 年前

这个 Rotating Text Exactly 示例(列在页面右栏中,或 here in github ),讨论将文本放置在精确位置,以及像往常一样,在IE中工作所需的额外步骤。

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