Convertendo Pixels para curvas de Bezier, em Actionscript 3

Question

Ok, então eu vou tentar ser o mais descritivo possível.

Eu estou trabalhando em um projeto para um cliente que requer um recurso de mascaramento de estilo jibjab de uma imagem enviada.

Eu gostaria de ser capaz de gerar um objeto de banco de dados armazenável que contém posições de uma forma bezier âncora / controle, para que eu possa retirá-lo mais tarde e re-mascarar o objeto. Isso tudo é muito fácil de fazer, exceto por um detalhe:. Eu preciso para criar o objeto bezier de um esboço desenhado pelo usuário

Até agora, aqui está como eu imagino o processo em andamento:

no mouse para baixo, criar um novo sprite, beginFill, ea posição moveTo mouse.

no movimento do mouse, lineTo um XY coordenadas.

no mouse para cima, endFill.

Isso tudo funciona muito grande. Eu poderia simplesmente armazenar as informações aqui, mas eu estaria olhando para um objeto gigante, cheio de toneladas de coordenadas bastante inútil x / y, e não há maneira de realmente fazer o ajuste fino muda fora de colocar pegas em cada pixel. (Eu posso também dar ao usuário final uma ferramenta lápis ...)

Aqui está o que eu estou pensando tanto quanto bezier cálculo curva vai:

1: descobrir quando eu preciso para começar uma nova curva, e acompanhar o xy do pixel nesse intervalo. Eu estou imaginando isso ser apenas uma contagem de pixels, talvez apenas incrementar uma variável de contagem por jogada do mouse e fazer um novo a cada x pixels. A questão aqui é algumas curvas seria impreciso, e outros desnecessário, mas eu realmente só precisa de uma área geral, não uma representação exata, para que ele pudesse trabalhar. Eu ficaria mais feliz com algo um pouco mais esperto embora.

2: tomar cada nova x / y, armazená-lo como uma âncora, e descobrir onde um controle iria para fazer a curva de linha entre este ea última âncora. isso é onde eu ficar realmente desligou. Tenho certeza de que alguém tenha feito isso em flash, mas nenhuma quantidade de googling consigo me ajudar com a maneira de conseguir este feito. Eu fiz um monte de desenho e o pouco de matemática I pode envolver meu cérebro ao redor, mas não consigo descobrir uma maneira de converter pixels para Beziers.

Isso é possível? Tudo o que eu realmente preciso é algo que vai chegar perto da mesma forma. Estou pensando em âncoras talvez única colocando quando o ângulo do próximo pixel está além de 180 graus em relação à linha atual ou algo assim, e apenas pegar a borda do arco entre essas mudanças, mas não importa o quanto eu tente, eu não consigo descobrir como obter esse trabalho!

Obrigado por sua ajuda, eu vou ter a certeza de postar meu progresso aqui como eu ir, eu acho que isso poderia ser realmente útil em muitas aplicações, desde que ele é realmente viável ...

Jesse

Answer 1

Obrigado pelas respostas, embora eu acho que eu provavelmente deveria ser mais específico sobre a aplicação, eu estou realmente precisando apenas um esboço para uma máscara, que converte imagens para vetores ou polígonos, apesar do quão legal ou seja, não realmente resolver o meu problema. O algoritmo quadrados linear menos é mega legal, eu acho que isso pode estar mais perto do que eu estou procurando.

Eu tenho uma solução básica de ir agora, eu só estou contando movimentos do mouse, em seguida, cada X (jogar com ele para obter curva mais desejáveis) se move, eu pegar a posição xy. então, eu tomo todos os outros xy armazenado, e transformá-lo em uma âncora, as XYS restantes são transformados em controles. Esta é produzir resultados pouco desejáveis, mas tem algumas questões menores, em que a velocidade com que a máscara é desenhada efeitos o número de identificadores, e é realmente apenas começando uma área geral, não um ajuste preciso. Curiosamente, os usuários parecem atrair mais lento para formas mais precisas, por isso, esta solução funciona muito melhor do que eu imaginava, mas não é tão bom quanto poderia ser. Isto irá funcionar para o cliente, portanto, embora não há nenhuma razão para persegui-lo ainda mais, eu gosto de aprender coisas novas, e vai passar algum fora a hora do relógio olhando para linear menos equações e ver se eu posso angariar uma classe que vai fazer esses cálculos para mim. Se alguém é executado através de algum código AS3 para este tipo de coisa, ou gostaria de alguma meu, deixe-me saber, este é um quebra-cabeça interessante.

Answer 2

Parece que um monte de trabalho para transformar pixels em curvas Bezier. Você pode tentar usar algo como o algoritmo de mínimos quadrados linear. http://en.wikipedia.org/wiki/Linear_least_squares

A tato diferente, você pode ter seus usuários desenhar gráficos vetoriais em vez disso? Dessa forma, você pode simplesmente armazenar as formas no banco de dados.

Outro método legal de conversão de raster para vetor seria algo como este programa iterativo: http://rogeralsing.com/2008/12/07/genetic-programming-evolution-of-mona-lisa/

Boa sorte

Answer 3

Na minha resposta para esta questão eu discuto usando autotrace para converter bitmaps em Béziers. Eu recomendo passar o seu desenho do usuário através deste programa no servidor. Autotrace faz um trabalho fantástico de rastreamento e simplificando por isso não há necessidade de tentar reinventar a roda aqui.