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?Colocación del texto de Raphael js: centrando el texto en un círculo
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!
salida de este código se ve mejor: text.translate (paper.width/2, paper.height/2); –
'text.getBBox(). Width' no funciona, ya que siempre devuelve 0 :( – stej