Umieść etykietę w "środku" ścieżki SVG

Próbuję narysować etykietę na wieloboku pliku svg. Problem, z jakim się borykam, polega na przybliżeniu środka tego wielokąta w celu umieszczenia etykiety, ponieważ współrzędne ścieżki są w formacie SVG i muszą zostać przeanalizowane. Czy istnieje łatwiejszy sposób określenia środka wieloboku svg (może ktoś może wskazać bibliotekę javascript lub fragment)? Używam biblioteki javascript Raphael do manipulowania svg, ale wydaje się, że nie wykracza poza standardową funkcjonalność svg.Umieść etykietę w "środku" ścieżki SVG

Źródło

2009-11-07 sol

Najprostszą rzeczą, którą możesz spróbować zrobić, to obliczyć centrum, biorąc średnią ze wszystkich punktów w wielokącie. Powinien działać dla wszystkich, ale najbardziej nieregularnych wielokątów. Użyłem tego samego algorytmu do dobrego efektu w moich programach.

Powodzenia.

Źródło

2009-11-07 04:36:09 Randaltor

Niestety, nie za jasno frazowania moje pytanie. Problem polega raczej na tym, jak uzyskać współrzędne z d-atrybutu ścieżki, który jest w tym formacie <ścieżka d = "M 100 100 L 300 100 L 200 300 z" wypełnienie = "czerwony" skok = "niebieski" skok- width = "3" /> w celu obliczenia centrum lub znalezienia biblioteki javascript, która robi to beze mnie, parsując atrybut zgodnie ze specyfikacją svg. – sol

Pierwszym problemem, który należy rozwiązać, jest najpierw konwersja svg do wieloboku. Szukałem kodu do konwersji ścieżek svg na wielokątów, ale nie mogłem go znaleźć. Być może będzie musiał dig-up na kody źródłowe svg projektów – ivanceras

można spróbować następujące przybliżenie do zrobienia czegoś podobnego do sugestii wielokąta, na podstawie metod 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); 
}

Myślę, że najprostszym sposobem jest użycie środku element ścieżki za boundingbox (pathelm. getBBox()), co jest prostsze niż sugestia wielokąta.

Źródło

2009-11-07 11:33:46

+11

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); 'zrobiłem dla mnie trik, thx. – lwe

Dzięki @Iwe! To było o wiele prostsze, niż mogłem sobie wyobrazić :) – Viet

@ Komentarz Iwe zasługuje na osobną odpowiedź. Jest to prostsze, inne podejście z różnymi zaletami i wadami. Oto wersja demonstracyjna [** JSBIN obydwu z wykorzystaniem kształtów krajów Wietnamu i Kanady **] (http://jsbin.com/orAzoFI/3/edit) pokazująca pewne kluczowe punkty i różnice: że żadna z metod nie gwarantuje, że centrum znajdzie się w środku kształt, a metoda Erika ściąga środek w kierunku części ścieżki, które są bardziej spękane/złożone/mają większy względny obwód. – user568458

-2

Wstawianie znacznika tekstu wewnątrz SVG i położeniu go poprzez obliczenie szerokości i wysokosc

<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>

Źródło

2012-10-18 11:36:16

Umieść etykietę w "środku" ścieżki SVG

Odpowiedz

Powiązane problemy