2012-08-09 12 views
9

¿Existe una biblioteca Javascript que pueda realizar operaciones booleanas en rutas (Beziercurves)? Sé de paper.js y raphael.js, pero ninguno puede realizar estas acciones.JavaScript Curve Library con operaciones booleanas

saludos Philipp

+0

Qué quiere decir usted quiere comparar las curvas y verificar la igualdad? – Aesthete

+0

quiero decir operaciones booleanas como unión, intersecciones, diferencia. Quizás las curvas sean una noción incorrecta para esto, pero estas operaciones son estándares en todas las aplicaciones de gráficos vectoriales como adobe illustrator o inkscape. mira aquí: http://www.angelfire.com/mi/kevincharles/inkscape/p7c4.html – philipp

+0

¿qué tal http://stackoverflow.com/questions/109364/bezier-clipping/3005394#3005394? – artistoex

Respuesta

3

Si convierte ruta de acceso a los polígonos (por ejemplo, utilizando pathelement.getPointAtLength (.)), entonces puedes usar Javascript Clipper, que es un puerto de javascript de la popular Clipper Library de Angus Johnson.

Este es un ejemplo de la diferencia, pero también son posibles Union, Intersect and Xor: Difference of polygons

La página de Javascript Clipper es here.

Si getPointAtLength() da demasiados puntos, Javascript Clipper tiene una función ClipperLib.Lighten(), que puede reducir el conteo de puntos significativamente.

La biblioteca admite también la compensación de polígonos. Vea el live demo.


EDIT: después de la prueba puedo confirmar que pathelement.getPointAtLength() es la más apropiada para, por ejemplo. pruebas de impacto, pero no tan buenas para polinizar en este caso, ya que produce muy pocos o demasiados puntos y no tiene en cuenta la curvatura. Es el hecho de que las curvas cerradas necesitan más puntos y menos curvas sueltas. Mejor es convertir todos los segmentos de ruta en curvas cúbicas y usar algún algoritmo adaptativo para curvas poligonales. He realizado algunas pruebas y pronto podré presentar una mejor forma de polinización.

EDITAR: He logrado implementar la función de polígono de ruta SVG, que maneja todo tipo de rutas y también allana las transformaciones. Después de probar miles de rutas y transformaciones generadas aleatoriamente, parece ser confiable. También todos los posibles casos degenerados (donde las curvas son colineales o algunos de los puntos son los mismos) se manejan sin problemas. Aunque ya es mucho más rápido y más preciso que getPointAtLength() nativo y produce significativamente menos puntos, el proceso tiene espacio para mejoras de velocidad utilizando, por ejemplo. taxicab angles en lugar de atan2() y hacer que el código sea totalmente compatible con Web Workers eliminando todos los métodos DOM. Quiero que sea 100% libre de errores antes de publicarlo. Es caso de uso ideal es, por ejemplo. posibilidad de realizar operaciones booleanas con polígonos generados.

+0

que es bueno!Voy a intentarlo los próximos días ... – philipp

6

Paper.js ahora tiene operaciones booleanas en su núcleo:

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

y aquí se puede ver las operaciones en acción:

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

+0

genial! ¡Muy bien! – philipp

+1

Lo probé y unir dos círculos ya muestra algunos errores importantes. –

+0

Clipper de Timo arriba es muy confiable. Lo tengo en una aplicación web que desarrollamos junto con Timo y es fenomenal tanto en velocidad como en fiabilidad. El único problema es la poligonalización de las curvas, pero si se realiza en pequeños intervalos, el resultado visual es indistinguible. Las operaciones booleanas Curve son notoriamente difíciles de acertar, por lo que se esperan más errores con las operaciones booleanas de paper.js. Solo mi opinión –