html - library - Raphael js posicionamiento de texto: centrando el texto en un círculo

raphael js examples

Question

Estoy usando Raphael js para dibujar números en círculos. El problema es que cada número tiene un ancho / alto diferente, por lo que usar un conjunto de coordenadas para centrar el texto no funciona. El texto se muestra de manera diferente entre IE, FF y safari. ¿Hay una forma dinámica de encontrar la altura / anchura 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");
};

¡Muchas gracias!

Answer 1

(Respuesta reescrita): Raphael.js centra los nodos de texto tanto horizontal como 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.

Entonces, solo especificando el mismo valor x, y que 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 relevante:

• Línea de origen responsable de la alineación vertical.
• Línea fuente responsable de la alineación horizontal.

Answer 2

El ejemplo de Rotating Text Exactly (listado en la columna de la derecha de la página, o aquí en github ), describe cómo colocar el texto en una posición precisa, junto con, como es habitual, los pasos adicionales necesarios para que las cosas funcionen en IE.

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

Answer 3

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 4

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

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