RaphaelJs: Как добавить текст в область, определенную путем?

Question

У меня есть SVG-изображение Соединенных Штатов, которое я нарисовал с небольшой помощью Raphaël js:

http://jsfiddle.net/zCRkg/2/

То, что я хочу сделать, это поместить текст справа от каждого состояния, когда вы наводите курсор на него. Проблема состоит в том, что, поскольку каждое состояние является путем, довольно сложно определить координаты x & y для того, где разместить метку.

Итак, кто-нибудь знает способ вычисления центра пути с использованием Raphaël? Если не получится, что кто-нибудь знает, как это сделать, учитывая массив векторов?

Answer 1

Что вам нужно, так это функция getBBox в Raphaël . Это даст вам ограничивающий прямоугольник, который вы можете использовать для вычисления центральной точки пути:

var bbox = st.getBBox();
var text = r.text(bbox.x + bbox.width/2, bbox.y + bbox.height/2, "Foo");

Я раздвоил вашу скрипку и заставил ее показывать статический текст в середине каждого состояния при наведении курсора. Получение названия штата из ваших данных оставлено в качестве упражнения.

Answer 2

среднее значение разницы между координатами должно давать вам центр, но это, вероятно, не самый эффективный способ