2012-08-09 15 views
9

Czy istnieje biblioteka JavaScript, która może wykonywać operacje boolowskie na ścieżkach (Beziercurves)? Wiem o paper.js i raphael.js, ale nie można wykonać tych akcji.Biblioteka krzywych JavaScript z operacjami boolowskimi

pozdrowienia Philipp

+0

Czy oznacza chcesz porównać krzywe i sprawdzić równość? – Aesthete

+0

Mam na myśli operacje boolowskie takie jak union, przecięcia, różnice. Może krzywe to niewłaściwe pojęcie, ale te operacje są standardami we wszystkich wektorowych aplikacjach graficznych, takich jak Adobe Illustrator lub Inkscape. zobacz tutaj: http://www.angelfire.com/mi/kevincharles/inkscape/p7c4.html – philipp

+0

co z http://stackoverflow.com/questions/109364/bezier-clipping/3005394#3005394? – artistoex

Odpowiedz

3

Jeśli przekonwertować ścieżkę do wielokątów (np używając pathelement.getPointAtLength (.)), możesz użyć Javascript Clipper, który jest portem javascript popularnej Clipper Library Angusa Johnsona.

To jest przykład różnicy, ale również Union, Intersect and Xor są możliwe: Difference of polygons

Strona javascript Clipper jest here.

Jeśli funkcja getPointAtLength() podaje za dużo punktów, Javascript Clipper ma funkcję ClipperLib.Lighten(), która może znacznie zmniejszyć liczbę punktów.

Biblioteka obsługuje również kompensację wieloboków. Zobacz live demo.


EDYCJA: po przetestowaniu mogę potwierdzić, że pathelement.getPointAtLength() najlepiej nadaje się do np. testowanie trafień, ale nie tak dobre dla wielokąty w tym przypadku, ponieważ wytwarza zbyt mało lub zbyt wiele punktów i nie uwzględnia krzywizny. To fakt, że ciasne krzywe wymagają mniej punktów i mniejszych krzywych. Lepiej jest przekonwertować wszystkie segmenty ścieżki na krzywe sześcienne i zastosować algorytm adaptacyjny do krzywych polaryzacji. Zrobiłem kilka testów i wkrótce mogę wprowadzić lepszy sposób na poligonizację.

EDYCJA: Udało mi się zaimplementować funkcję poligonizacji ścieżek SVG, która obsługuje wszystkie rodzaje ścieżek, a także spłaszcza transformacje. Po przetestowaniu tysięcy losowo wygenerowanych ścieżek i transformacji wydaje się być niezawodny. Również wszystkie możliwe zdegenerowane przypadki (gdzie krzywe są współliniowe lub niektóre z punktów są takie same) są obsługiwane bez problemów. Chociaż jest już wiele razy szybszy i dokładniejszy niż natywna metoda getPointAtLength(), a jednocześnie generuje znacznie mniej punktów, proces ten umożliwia zwiększenie prędkości za pomocą np. kąty taksówki zamiast atan2() i tworzenie kodu w pełni kompatybilnego z Web Workers poprzez usunięcie wszystkich metod DOM. Przed opublikowaniem chcę sprawić, by był w 100% wolny od błędów. Idealnym przykładem użycia jest np. możliwość wykonywania operacji boolowskich z wygenerowanymi poligonami.

+0

To jest dobre!Dam ci spróbować następne dni ... – philipp

6

Paper.js ma teraz operacje logiczne w swej istocie:

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

I tu widać operacje w akcji:

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

+0

fajne! Bardzo dobrze! – philipp

+1

Wypróbowałem to i połączenie dwóch kręgów już pokazuje kilka znaczących błędów. –

+0

Clipper z Timo powyżej jest bardzo niezawodny. Mam go w webappie opracowanym wspólnie z Timo i jest fenomenalny zarówno pod względem szybkości i niezawodności. Jedynym problemem jest poligonizacja krzywych, ale jeśli odbywa się to w małych odstępach czasu, wynik wizualny jest nie do odróżnienia. Operacje boolowskie krzywoliniowe są bardzo trudne do uzyskania, więc spodziewaj się więcej błędów dzięki opcjom binarnym paper.js. Tylko moja opinia: –

Powiązane problemy