Raphael js Textpositionierung: Zentrierung von Text in einem Kreis

Question

Ich verwende Raphael js, um eingekreiste Zahlen zu zeichnen. Das Problem ist, dass jede Zahl eine unterschiedliche Breite/Höhe hat, so dass die Verwendung eines Satzes von Koordinaten, um den Text zu zentrieren nicht funktioniert. Der Text wird in IE, FF und Safari unterschiedlich angezeigt. Gibt es eine dynamische Möglichkeit, die Höhe/Breite der Zahl zu finden und sie entsprechend zu zentrieren?

Hier ist meine Testseite:

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

und meinen Code:

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

Herzlichen Dank!

Answer 1

(Antwort umgeschrieben): Raphael.js zentriert Textknoten standardmäßig sowohl horizontal als auch vertikal.

"Zentrieren" bedeutet hier, dass das x- und y-Argument der Methode paper.text() den Mittelpunkt des Begrenzungsrahmens des Textes erwartet.

Wenn Sie also denselben x- und y-Wert wie der Kreis angeben, sollte das gewünschte Ergebnis erzielt werden:

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

( jsFiddle )

Relevanter Quellcode:

• Quellzeile, die für die vertikale Ausrichtung verantwortlich ist
• Quellzeile, die für die horizontale Ausrichtung verantwortlich ist

Answer 2

Vielleicht das:

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 3

Verwenden Sie dieses Attribut: 'text-anchor':'start' :

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

Answer 4

En Text genau rotieren Beispiel (in der rechten Spalte der Seite aufgeführt, oder hier auf github ), erörtert die Platzierung von Text an einer bestimmten Stelle, zusammen mit, wie üblich, zusätzlichen Schritten, die erforderlich sind, damit die Dinge im IE funktionieren.

Es wird ein Begrenzungsrahmen für den Text gefunden; ich denke, es ist einfach, den Text um die Hälfte des Begrenzungsrahmens zu verschieben, wie Jan vorgeschlagen hat.