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

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

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

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

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

Ответы

Ответ 1

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

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

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

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

Example output

(jsFiddle)

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

Ответ 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);

Ответ 3

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

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

Ответ 4

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

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