Поместите метку в центр пути SVG

Я пытаюсь нарисовать метку на многоугольнике файла svg. Проблема, с которой я сталкиваюсь, заключается в том, чтобы примерно определить центр этого многоугольника для размещения метки, поскольку координаты пути имеют формат svg и должны быть проанализированы. Есть ли более простой способ определить центр многоугольника svg (может быть, кто-то может указать библиотеку javascript или фрагмент)? Я использую библиотеку javascript Raphael для управления svg, но, похоже, она не выходит за рамки стандартной функциональности svg.


svg path polygon raphael
person sol    schedule 07.11.2009    source источник

Ответы (3)


arrow_upward
11
arrow_downward

Вы можете попробовать следующее приближение, чтобы сделать что-то похожее на предложение многоугольника, основанное на методах SVG DOM:

var totalPathLength = pathelm.getTotalLength();
var step = totalPathLength / 100;
for(var dist=0; dist < totalPathLength; dist+=step)
{
  var pt = pathelm.getPointAtLength(dist);
  addToAverage(pt.x, pt.y);
}

Я думаю, что самый простой подход - использовать центр ограничивающей рамки элемента пути (pathelm.getBBox()), это проще, чем предложение многоугольника.

person Erik Dahlström    schedule 07.11.2009
comment
PS: var bbox = p.getBBox(); var x = Math.floor(bbox.x + bbox.width/2.0); var y = Math.floor(bbox.y + bbox.height/2.0); помог мне, спасибо. - person lwe; 17.02.2011
comment
Спасибо @Iwe! Это было намного проще, чем я мог себе представить :) - person Viet; 04.06.2012
comment
Комментарий @Iwe заслуживает отдельного ответа. Это более простой, другой подход с другими плюсами и минусами. Вот демонстрация JSBIN с использованием фигур стран Вьетнама и Канады, показывающая некоторые ключевые моменты и различия: ни один из методов не гарантирует, что центр будет находиться внутри формы, и что метод Эрика смещает центр к частям пути, которые более сломаны/сложны/имеют более высокую относительную окружность. - person user56reinstatemonica8; 08.10.2013
comment
@user568458 user568458 прочитайте последнее предложение моего ответа, я предложил метод getBBox, хотя я не упомянул, как вычислить центр прямоугольника bbox, потому что я думал, что это так тривиально. Это правда, что ни один из методов не гарантирует, что вычисленный центр находится внутри фигуры. - person Erik Dahlström; 09.10.2013

arrow_upward
0
arrow_downward

Самое простое, что вы можете попробовать сделать, это вычислить центр, взяв среднее значение всех точек многоугольника. Это должно работать для всех, кроме самых неправильных полигонов. Я использовал тот же алгоритм для хорошего эффекта в своих программах.

Удачи.

person Randaltor    schedule 07.11.2009
comment
Извините, что не совсем четко сформулировал свой вопрос. Проблема больше в том, как получить координаты из d-атрибута пути, который имеет следующий формат: ‹путь d=M 100 100 L 300 100 L 200 300 z fill=красный штрих=синий штрих-ширина=3 /› по порядку чтобы вычислить центр или найти библиотеку javascript, которая делает это без моего разбора атрибута в соответствии со спецификацией svg. - person sol; 07.11.2009
comment
Первая проблема, которую нужно решить в первую очередь, — сначала преобразовать svg в полигон. Я искал код для преобразования путей svg в многоугольники, но не смог его найти. Возможно, придется копаться в исходных кодах проектов svg. - person ivanceras; 27.07.2010

arrow_upward
-3
arrow_downward

Вставьте текстовый тег внутри svg и расположите его, рассчитав ширину и высоту.

 <svg width="447pt" height="559pt" viewBox="0 0 894 1118" version="1.1" xmlns="http://www.w3.org/2000/svg">
    ............
    ............

   <text x="450" y="300" font-family="Verdana" font-size="15" fill="red" >
        Text To Show
   </text>
</svg>
person Ali Adravi    schedule 18.10.2012