Convertir píxeles a curvas de Bezier en Actionscript 3

Question

Ok, entonces intentaré ser lo más descriptivo posible.

Estoy trabajando en un proyecto para un cliente que requiere una función de enmascaramiento estilo jibjab de una imagen cargada.

Me gustaría poder generar un objeto almacenable en la base de datos que contenga posiciones de anclaje / control de una forma bezier, para poder sacarlo más tarde y volver a enmascarar el objeto. Todo esto es bastante fácil de hacer, excepto por una trampa: necesito crear el objeto bezier a partir de un esquema dibujado por el usuario.

Hasta ahora, así es como me imagino que va el proceso:

con el mouse hacia abajo, crea un nuevo sprite, beginFill y moveTo a la posición del mouse.

al mover el mouse, línea a una coordenada XY.

al mover el mouse hacia arriba, endFill.

Todo esto funciona muy bien. Simplemente podría almacenar la información aquí, pero estaría mirando un objeto GIGÁNTICO lleno de toneladas de coordenadas x / y bastante inútiles, y no hay forma de hacer cambios de ajuste fuera de poner controladores en cada píxel. (También puedo darle al usuario final una herramienta de lápiz ...)

Esto es lo que estoy pensando en lo que respecta al cálculo de la curva bezier:

1: Averigüe cuándo necesito comenzar una nueva curva y rastree la xy del píxel en este intervalo. Me imagino que esto es solo un recuento de píxeles, tal vez solo incremente una variable de recuento por movimiento del mouse y haga una nueva cada x píxeles. El problema aquí es que algunas curvas serían inexactas y otras innecesarias, pero realmente solo necesito un área general, no una representación exacta, por lo que podría funcionar. Sin embargo, sería más feliz con algo un poco más inteligente.

2: tome cada nuevo x / y, guárdelo como un ancla y descubra dónde iría un control para hacer que la línea se curvara entre este y el último ancla. Aquí es donde realmente me cuelgo. Estoy seguro de que alguien ha hecho esto en flash, pero ninguna cantidad de google parece ayudarme con la forma de hacerlo. He hecho muchos bocetos y las pocas matemáticas que puedo entender, pero parece que no puedo encontrar una manera de convertir píxeles a beziers.

¿Es esto posible? Todo lo que realmente necesito es algo que se acerque a la misma forma. Estoy pensando en tal vez solo colocar anclajes cuando el ángulo del siguiente píxel está más allá de 180 grados en relación con la línea actual o algo así, y simplemente agarrar el borde del arco entre estos cambios, pero no importa cuánto lo intente, yo ¡Parece que no puedo entender cómo hacer que esto funcione!

Gracias por su ayuda, me aseguraré de publicar mi progreso aquí a medida que avance, creo que esto podría ser realmente útil en muchas aplicaciones, siempre que sea realmente factible ...

Jesse

Answer 1

Gracias por las respuestas, aunque supongo que probablemente debería ser más específico sobre la aplicación, realmente solo necesito un esquema para una máscara, por lo que convertir imágenes a vectores o polígonos, a pesar de lo genial que es Realmente soluciono mi problema. El algoritmo lineal de mínimos cuadrados es genial, creo que esto podría estar más cerca de lo que estoy buscando.

Tengo una solución básica en este momento, solo estoy contando los movimientos del mouse, luego cada X (jugando con ella para obtener la curva más deseable) se mueve, tomo la posición xy. luego, tomo cualquier otra xy almacenada, y la convierto en un ancla, las xys restantes se convierten en controles. Esto está produciendo resultados algo deseables, pero tiene algunos problemas menores, ya que la velocidad a la que se dibuja la máscara afecta el número de asas, y en realidad solo está obteniendo un área general, no un ajuste preciso. Curiosamente, los usuarios parecen dibujar más lentamente para obtener formas más precisas, por lo que esta solución funciona mucho mejor de lo que había imaginado, pero no es tan agradable como podría ser. Esto funcionará para el cliente, por lo que, aunque no hay ninguna razón para seguir adelante, me gusta aprender cosas nuevas y pasaré algo de tiempo fuera del reloj buscando ecuaciones mínimas lineales y viendo si puedo obtener una clase que haga estos cálculos para mi. Si alguien se encuentra con algún código AS3 para este tipo de cosas, o quisiera alguno de los míos, hágamelo saber, este es un rompecabezas interesante.

Answer 2

Parece mucho trabajo convertir los píxeles en curvas de Bezier. Podría intentar usar algo como el algoritmo lineal de mínimos cuadrados. http://en.wikipedia.org/wiki/Linear_least_squares

Un toque diferente, ¿podría hacer que sus usuarios dibujen gráficos vectoriales en su lugar? De esa manera, puede almacenar las formas en la base de datos.

Otro método genial de convertir el ráster en vector sería algo como este programa iterativo: http://rogeralsing.com/2008/12/07/genetic-programming-evolution-of-mona-lisa/

Buena suerte

Answer 3

En mi respuesta a esta pregunta discuto el uso de autotrace para convertir mapas de bits en beziers. Recomiendo pasar a su usuario dibujando a través de este programa en el servidor. Autotrace hace un trabajo fantástico de rastreo y simplificación, por lo que no hay necesidad de intentar reinventar la rueda aquí.