Я пытаюсь нарисовать метку на многоугольнике файла svg. Проблема, с которой я сталкиваюсь, заключается в том, чтобы примерно определить центр этого многоугольника для размещения метки, поскольку координаты пути имеют формат svg и должны быть проанализированы. Есть ли более простой способ определить центр многоугольника svg (может быть, кто-то может указать библиотеку javascript или фрагмент)? Я использую библиотеку javascript Raphael для управления svg, но, похоже, она не выходит за рамки стандартной функциональности svg.
Поместите метку в центр пути SVG
Ответы (3)
Вы можете попробовать следующее приближение, чтобы сделать что-то похожее на предложение многоугольника, основанное на методах 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
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
Спасибо @Iwe! Это было намного проще, чем я мог себе представить :)
- person Viet; 04.06.2012
Комментарий @Iwe заслуживает отдельного ответа. Это более простой, другой подход с другими плюсами и минусами. Вот демонстрация JSBIN с использованием фигур стран Вьетнама и Канады, показывающая некоторые ключевые моменты и различия: ни один из методов не гарантирует, что центр будет находиться внутри формы, и что метод Эрика смещает центр к частям пути, которые более сломаны/сложны/имеют более высокую относительную окружность.
- person user56reinstatemonica8; 08.10.2013
@user568458 user568458 прочитайте последнее предложение моего ответа, я предложил метод getBBox, хотя я не упомянул, как вычислить центр прямоугольника bbox, потому что я думал, что это так тривиально. Это правда, что ни один из методов не гарантирует, что вычисленный центр находится внутри фигуры.
- person Erik Dahlström; 09.10.2013
Самое простое, что вы можете попробовать сделать, это вычислить центр, взяв среднее значение всех точек многоугольника. Это должно работать для всех, кроме самых неправильных полигонов. Я использовал тот же алгоритм для хорошего эффекта в своих программах.
Удачи.
person
Randaltor
schedule
07.11.2009
Извините, что не совсем четко сформулировал свой вопрос. Проблема больше в том, как получить координаты из d-атрибута пути, который имеет следующий формат: ‹путь d=M 100 100 L 300 100 L 200 300 z fill=красный штрих=синий штрих-ширина=3 /› по порядку чтобы вычислить центр или найти библиотеку javascript, которая делает это без моего разбора атрибута в соответствии со спецификацией svg.
- person sol; 07.11.2009
Первая проблема, которую нужно решить в первую очередь, — сначала преобразовать svg в полигон. Я искал код для преобразования путей svg в многоугольники, но не смог его найти. Возможно, придется копаться в исходных кодах проектов svg.
- person ivanceras; 27.07.2010
Вставьте текстовый тег внутри 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