Semplificazione delle stringhe del percorso SVG riducendo il numero di nodi

Sto generando una stringa di percorso SVG di grandi dimensioni che rappresenta un grafico a linee.Semplificazione delle stringhe del percorso SVG riducendo il numero di nodi

Sotto il grafico ho un cursore per selezionare una sezione dell'intervallo di tempo. Dietro il cursore è una mini anteprima dell'intero grafico a linee.

Attualmente sto ridimensionando il percorso per generare l'anteprima, ma così facendo ho finito con decine di nodi per pixel e quindi sono necessari molti più dettagli. Ovviamente questo dà al browser più rendering da fare di quanto non sia necessario.

Ci sono molte informazioni disponibili sulla compressione di stringhe svg (gzip, ecc.), Anche se su algoritmi che semplificano realmente il percorso riducendo i nodi.

Sto utilizzando Raphaeljs e sto cercando una soluzione basata su javascript. Qualche idea?

fonte

2012-12-05 hacklikecrack

avete un esempio del percorso di 'd' attributo? es .. – lostsource

Stai già caricando il percorso completo della "risoluzione" mostrandolo grande, il risultato della performance per visualizzarlo di nuovo in una miniatura dovrebbe essere minimo, molto meno che avere un algoritmo semplifica il percorso. – Duopixel

@Duopixel: Non penso che sia vero affatto. Avresti lo stesso percorso apparire due volte nel DOM. Sarei molto sorpreso se i browser ottimizzassero per questo. Inoltre, a quanto ho capito, la mini anteprima non avrà le stesse proporzioni del percorso completo - anche la larghezza del tratto potrebbe essere diversa (avrebbe senso renderla leggermente più pesante in relazione al grafico a dimensione intera). –

Simplify.js è probabilmente quello che stai cercando.

Dato il grafico linea è composta da segmenti rettilinei solo (che per definizione dovrebbe), è possibile utilizzarlo come questo:

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)

fonte

2012-12-06 06:32:04

Sfortunatamente, questo non sembra funzionare in Chrome. –

Modificato il codice per funzionare con Chrome –

Non è adatto per curve, comandi A, C, Q, T, S ecc. – cuixiping

Semplificazione delle stringhe del percorso SVG riducendo il numero di nodi

risposta

Problemi correlati