Uproszczenie łańcuchów znaków SVG przez zmniejszenie liczby węzłów

Generuję duży ciąg znaków SVG reprezentujący wykres liniowy.Uproszczenie łańcuchów znaków SVG przez zmniejszenie liczby węzłów

Pod wykresem mam suwak do wybierania wycinka zakresu czasu. Za suwakiem znajduje się mini podgląd całej wykresu liniowego.

Obecnie przeskalowuję ścieżkę, aby wygenerować podgląd, jednak w rezultacie otrzymuję dziesiątki węzłów na piksel i dlatego potrzeba więcej szczegółów. Oczywiście to daje przeglądarce więcej renderowania niż to konieczne.

Dostępnych jest wiele informacji na temat kompresji ciągów svg (gzipowania itp.), Jednak niewiele z algorytmów, które faktycznie upraszczają ścieżkę, redukując węzły.

Używam Raphaeljs i szukam rozwiązania opartego na javascript. Jakieś pomysły?

Źródło

2012-12-05 hacklikecrack

masz przykładowe ścieżki „d” atrybutu? np. .. <ścieżka d = "M150 0 L75 200 L225 200 Z" /> – lostsource

Już ładujesz pełną ścieżkę "rozdzielczości", wyświetlając ją dużą, trafienie wydajności do wyświetlania jej ponownie w miniaturze powinno być minimalne, znacznie mniej niż posiadanie algorytmu upraszcza ścieżkę. – Duopixel

@Duopixel: Nie sądzę, że to prawda. Tę samą ścieżkę pojawią się dwa razy w DOM. Byłbym bardzo zaskoczony, gdyby Browsers zoptymalizowałyby dla tego. Ponadto, jak rozumiem, mini podgląd nie będzie miał takiego samego współczynnika kształtu jak pełna ścieżka - również szerokość obrysu może być inna (miałaby sens, aby była nieco cięższa w stosunku do pełnego rozmiaru wykresu). –

Simplify.js to prawdopodobnie to, czym się opiekujesz.

Zważywszy na wykresie linia składa się z prostych odcinków tylko (które z definicji powinno), można go używać jak to:

var tolerance = 3 
    var pathSegArray = [] 
    for (var i=0; i<path.pathSegList.numberOfItems; i++) { 
    pathSegArray.push(path.pathSegList.getItem(i)) 
    } 
    var newPathArray = simplify(pathSegArray,tolerance) 
    var newD = "M"; 
    for (i=0; i<newPathArray.length; i++) { 
    newD += newPathArray[i].x + " " + newPathArray[i].y + " " 
    } 
    path.setAttribute("d",newD)

Źródło

2012-12-06 06:32:04

Niestety nie działa to w Chrome. –

Zmieniono kod do pracy z Chrome –

Nie nadaje się do wykonywania krzywych, poleceń A, C, Q, T, S itp. – cuixiping

Uproszczenie łańcuchów znaków SVG przez zmniejszenie liczby węzłów

Odpowiedz

Powiązane problemy