Posizionamento del testo di Raffaello: centraggio del testo in un cerchio

Question

Sto usando Raphael js per disegnare numeri cerchiati. Il problema è che ogni numero ha una larghezza/altezza diversa, quindi usare un set di coordinate per centrare il testo non funziona. Il testo viene visualizzato in modo diverso tra IE, FF e Safari. C'è un modo dinamico per trovare l'altezza/larghezza del numero e centrarlo di conseguenza?

Qui è la mia pagina di prova:

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

e il mio codice:

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

Grazie mille!

Answer 1

Forse questo:

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

L'Rotating Text Exactly esempio (elencato nella colonna di destra della pagina, o here in github), discute inserire il testo in una posizione precisa, insieme, come al solito, passaggi aggiuntivi richiesti far funzionare le cose in IE.

Trova un riquadro di delimitazione per il testo; Immagino che sia semplice spostare il testo di metà del riquadro di delimitazione come suggerito da Jan.

Answer 3

(Risposta riscritta): Raphael.js centra i nodi di testo sia orizzontalmente che verticalmente per impostazione predefinita.

"Centraggio" qui significa che l'argomento x, y del metodo paper.text() si aspetta il centro del riquadro di delimitazione del testo.

Allora, specificando lo stesso valore x, y come il cerchio dovrebbe produrre il risultato desiderato:

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

(jsFiddle)

codice sorgente Rilevante:

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

Answer 4

Utilizzare questo attributo: 'text-anchor':'start':

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