Colocación del texto de Raphael js: centrando el texto en un círculo

Question

Estoy usando Raphael js para dibujar números en un círculo. El problema es que cada número tiene un ancho/alto diferente, así que usar un conjunto de coordenadas para centrar el texto no está funcionando. El texto se muestra de forma diferente entre IE, FF y safari. ¿Hay una forma dinámica de encontrar el alto/ancho del número y centrarlo en consecuencia?

Aquí está mi página de prueba:

http://jesserosenfield.com/fluid/test.html

y mi código:

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

Gracias mucho!

Answer 1

Tal vez esto:

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 2

El Rotating Text Exactly ejemplo (que aparece en la columna derecha de la página, o here in github), discute poner texto en una posición precisa, junto con, cuando proceda, medidas adicionales habituales necesaria para hacer que las cosas funcionen en IE.

Encuentra un cuadro delimitador para el texto; Me imagino que es fácil mover el texto a la mitad del cuadro delimitador como Jan sugirió.

Answer 3

(Respuesta reescrita): Raphael.js centra los nodos de texto horizontal y verticalmente de forma predeterminada.

"Centrar" aquí significa que el argumento x, y del método paper.text() espera el centro del cuadro delimitador del texto.

lo tanto, sólo especificando el mismo x, valor de y como el círculo debe producir el resultado deseado:

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

(jsFiddle)

código fuente pertinente:

• source line responsible for vertical alignment
• source line responsible for horizontal alignment

Answer 4

Usar este atributo: 'text-anchor':'start':

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