Raphael js позиционирование текста: центрирование текста по кругу

Question

Я использую Рафаэля Дж. Проблема в том, что каждое число имеет разную ширину / высоту, поэтому использование одного набора координат для центрирования текста не работает. Текст отображается по-разному между IE, FF и Safari. Есть ли динамический способ найти высоту / ширину числа и отцентрировать его соответственно?

Вот моя тестовая страница:

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

и мой код:

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

Большое спасибо!

Answer 1

(переписанный ответ): Raphael.js центрирует текстовые узлы по горизонтали и вертикали по умолчанию.

«Центрирование» здесь означает, что аргумент x, y метода paper.text () ожидает центр ограничивающей рамки текста.

Итак, просто указав то же значение x, y, что и у круга, вы получите желаемый результат:

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

( 1012 * jsFiddle *)

Соответствующий исходный код:

• линия источника, ответственная за вертикальное выравнивание
• линия источника, ответственная за горизонтальное выравнивание

Answer 2

Может быть, это:

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

Используйте этот атрибут: 'text-anchor':'start':

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

Answer 4

В примере Поворот текста точно (указан в правом столбце страницы или здесь, в github ), рассматривается размещение текста в точном положении, а также Обычно для работы в IE требуются дополнительные шаги.

Он находит ограничивающую рамку для текста; Я полагаю, что очень просто переместить текст на половину ограничительной рамки, как предположил Ян.