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

Я использую Raphael js для рисования обведенных чисел. Проблема в том, что каждое число имеет разную ширину/высоту, поэтому использование одного набора координат для центрирования текста не работает. Текст отображается по-разному в 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");
};

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


html css centering raphael
person HandiworkNYC.com    schedule 30.03.2010    source источник

Ответы (4)


arrow_upward
32
arrow_downward

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

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

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

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

Пример вывода

(jsFiddle)

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

person ento    schedule 17.03.2011

arrow_upward
9
arrow_downward

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

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);
person Jan Tojnar    schedule 03.04.2010
comment
Вывод этого кода выглядит лучше: text.translate(paper.width/2, paper.height/2); - person Jan Tojnar; 05.04.2010
comment
text.getBBox().width не работает, так как всегда возвращает 0 :( - person stej; 07.12.2010

arrow_upward
3
arrow_downward

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

paper.text( x, y, text ).attr( {'text-anchor':'start'} );
person Community    schedule 14.06.2011
comment
Спасибо! Это так полезно. Было много проблем с выравниванием текстов внутри raphaels SVG, но благодаря этому все мои проблемы исчезли! Ты крут :D - person taxicala; 10.11.2014

arrow_upward
0
arrow_downward

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

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

person Clinton Blackmore    schedule 09.12.2010