2013-02-23 15 views
11

A partire da inizio 2014, SVG spec non ha una built-nel supporto per le operazioni booleaneLe operazioni booleane su sentieri SVG

operazioni booleane sono metodi per alterare la geometria intrinseca di percorsi in gran parte si sovrappongono. Consentono la costruzione di forme complicate eseguendo operazioni su forme più semplici e sono in qualche modo simili a Constructive Solid Geometry(CSG).

Tuttavia, questa domanda si riferisce ai percorsi vettoriali 2D. Le operazioni di percorso più comuni sono: Unione, Substraction, Intersection, XOR (Exclusive Or).

Ci sono delle biblioteche in giro che potrebbero aiutarmi in questo?

+0

Puoi fornire alcune coppie di input/output? –

+0

Così come i diagrammi di Venn? –

+0

Quelli suonano come operazioni set, non operazioni booleane. E non puoi trasformare due cerchi in una figura 8. C'è un cerchio SVG ma non un SVG figura-8. Potresti voler usare una libreria di canvas come KineticJS per questo. –

risposta

8

C'è il numero Javascript Clipper, che consente tutti i set di Boolean Operations sui percorsi ma a condizione che il percorso di input sia un poligono .

  • Se abbiamo qualche curve (cubi/Curve di Bezier quadratica), che possono essere suddivisi in poligoni facilmente utilizzando il De Casteljau algorithm.

    • Se il campione suddivisione è sufficientemente elevata, il risultato sarebbe un poligono che appare visivamente come una curva (a costo di una grande quantità di dati come il numero di vertici aumenta linearmente, a seconda della fedeltà della suddivisione).

Poi possiamo nutrire il percorso in JavaScript Clipper per le operazioni booleane.


L'avvertimento qui è che perdiamo la natura "sinuosa" del percorso se contiene curve. Fare la "poligonizzazione" di cui sopra è, più o meno, una strada a senso unico.

+0

E se tale pologonizzazione non fosse un'opzione? – Thayne

+0

@thayne Google 'linea grassa ritaglio' –

Problemi correlati