2012-08-09 6 views
9

Esiste una libreria Javascript che può eseguire operazioni booleane su tracciati (Beziercurves)? Conosco paper.js e raphael.js, ma entrambi non possono eseguire queste azioni.Libreria di curve JavaScript con operazioni booleane

saluti Philipp

+0

Vuoi dire che si desidera confrontare le curve e controlla l'uguaglianza? – Aesthete

+0

intendo operazioni booleane come unione, intersezioni, differenza. Forse le curve sono la nozione sbagliata per questo, ma queste operazioni sono standard in tutte le applicazioni grafiche vettoriali come adobe illustrator o inkscape. guarda qui: http://www.angelfire.com/mi/kevincharles/inkscape/p7c4.html – philipp

+0

che dire di http://stackoverflow.com/questions/109364/bezier-clipping/3005394#3005394? – artistoex

risposta

3

Se si converte percorso di poligoni (ad esempio utilizzando pathelement.getPointAtLength (.)), quindi è possibile utilizzare Javascript Clipper, che è una porta javascript della famosa libreria Clipper di Angus Johnson.

Questo è un esempio di differenza, ma anche Union, Intersect and Xor sono possibili: Difference of polygons

La pagina di Javascript Clipper è here.

Se getPointAtLength() fornisce troppi punti, JavaScript Clipper ha una funzione ClipperLib.Lighten(), che può ridurre significativamente il numero di punti.

La libreria supporta anche la compensazione del poligono. Vedi lo live demo.


MODIFICA: dopo il test, posso confermare che pathelement.getPointAtLength() è il più adatto per es. ha colpito il test, ma non è così buono per il poligonizing in questo caso, perché produce troppo pochi o troppi punti e non tiene conto della curvatura. È il fatto che le curve strette richiedono più punti e meno curve. È meglio convertire tutti i segmenti del percorso in curve cubiche e utilizzare un algoritmo adattivo per le curve poligonali. Ho fatto alcuni test e potrebbe essere presto in grado di introdurre un modo migliore per la poligonizzazione.

MODIFICA: Sono riuscito a implementare la funzione di poligonizzazione del percorso SVG, che gestisce tutti i tipi di percorsi e appiattisce anche le trasformazioni. Dopo aver testato migliaia di percorsi e trasformazioni generate in modo casuale, sembra affidabile. Anche tutti i casi degeneri possibili (dove le curve sono collineari o alcuni punti sono uguali) vengono gestiti senza problemi. Anche se è già molte volte più veloce e più preciso di getPointAtLength() nativo mentre produce significativamente meno punti, il processo ha spazio per miglioramenti della velocità usando ad es. angoli del taxi invece di atan2() e rendendo il codice completamente compatibile con i Worker Web rimuovendo tutti i metodi DOM. Voglio renderlo privo di errori al 100% prima di pubblicarlo. Il caso d'uso ideale è eg. possibilità di eseguire operazioni booleane con poligoni generati.

+0

che è buono!Lo proverò nei prossimi giorni ... – philipp

6

Paper.js ha ora le operazioni booleane nel suo nucleo:

https://github.com/paperjs/paper.js/blob/master/src/path/PathItem.Boolean.js

E qui si possono vedere le operazioni in azione:

http://assets.paperjs.org/boolean/

+0

cool! Molto bene! – philipp

+1

L'ho provato e l'unione di due cerchi mostra già alcuni bug significativi. –

+0

Il Clipper di Timo è molto affidabile. Ce l'ho in una webapp che abbiamo sviluppato insieme a Timo ed è fenomenale sia in termini di velocità che di affidabilità. L'unico problema è la poligonizzazione delle curve, ma se fatto a piccoli intervalli il risultato visivo è indistinguibile. Le operazioni booleane curve sono notoriamente difficili da ottenere, quindi aspettati ulteriori bug con le operazioni booleane di paper.js. Solo la mia opinione –