Conversione di pixel in curve di Bezier in Actionscript 3

Question

Ok, quindi cercherò di essere il più descrittivo possibile.

Sto lavorando a un progetto per un client che richiede una funzione di mascheramento in stile jibjab di un'immagine caricata.

Vorrei essere in grado di generare un oggetto memorizzabile nel database che contiene posizioni di ancoraggio / controllo di una forma più bezier, in modo da poterlo estrarre in seguito e ri-mascherare l'oggetto. Tutto questo è abbastanza facile da fare, tranne un fermo: ho bisogno di creare l'oggetto più bezier da una struttura disegnata dall'utente.

Finora, ecco come immagino che il processo stia andando:

al passaggio del mouse verso il basso, crea un nuovo sprite, beginFill e sposta verso la posizione del mouse.

al passaggio del mouse, linea Per una coordinata XY.

al passaggio del mouse, endFill.

Tutto funziona alla grande. Potrei semplicemente memorizzare le informazioni qui, ma guarderei un oggetto GIGANTIC pieno di tonnellate di coordinate x / y piuttosto inutili, e non c'è modo di apportare modifiche di regolazione al di fuori del mettere le maniglie su ogni pixel. (Potrei anche dare all'utente finale uno strumento matita ...)

Ecco cosa sto pensando per quanto riguarda il calcolo della curva più bezier:

1: Scopri quando devo iniziare una nuova curva e traccia la xy del pixel in questo intervallo. Immagino che questo sia solo un conteggio dei pixel, forse solo incrementare una variabile di conteggio per mossa del mouse e crearne una nuova ogni x pixel. Il problema qui è che alcune curve sarebbero inaccurate e altre non necessarie, ma ho davvero bisogno di un'area generale, non di una rappresentazione esatta, quindi potrebbe funzionare. Sarei più felice con qualcosa di un po 'più intelligente però.

2: prendi ogni nuovo x / y, memorizzalo come ancora e scopri dove andrebbe un controllo per fare la curva di linea tra questa e l'ultima ancora. questo è dove mi rendo davvero. Sono sicuro che qualcuno lo abbia fatto in flash, ma nessuna quantità di googling può sembrare aiutarmi con il modo di farlo. Ho fatto un sacco di schizzi e quale piccola matematica posso avvolgere il cervello, ma non riesco a capire un modo per convertire i pixel in bezier.

È possibile? Tutto ciò di cui ho veramente bisogno è qualcosa che si avvicini alla stessa forma. Sto forse pensando di posizionare le ancore solo quando l'angolo del pixel successivo è oltre 180 gradi in relazione alla linea corrente o qualcosa del genere, e sto solo afferrando il bordo dell'arco tra questi cambiamenti, ma non importa quanto ci provi, io non riesco a capire come farlo funzionare!

Grazie per il tuo aiuto, sarò sicuro di pubblicare i miei progressi qui mentre vado, penso che questo potrebbe essere davvero utile in molte applicazioni, purché sia ??effettivamente fattibile ...

Jesse

Answer 1

Grazie per le risposte, anche se probabilmente dovrei essere più specifico sull'applicazione, ho davvero bisogno solo di un contorno per una maschera, quindi convertire le immagini in vettori o poligoni, nonostante quanto sia bello, non lo fa risolve davvero il mio problema. L'algoritmo lineare dei minimi quadrati è fantastico, penso che potrebbe essere più vicino a quello che sto cercando.

Ho una soluzione di base in corso in questo momento, sto solo contando le mosse del mouse, quindi ogni X (giocandoci per ottenere la curva più desiderabile) si muove, afferro la posizione xy. quindi prendo ogni altro xy memorizzato e lo trasformo in un ancoraggio, i restanti xys vengono trasformati in controlli. Questo sta producendo risultati un po 'desiderabili, ma ha alcuni problemi minori, in quanto la velocità con cui viene disegnata la maschera influisce sul numero di maniglie, e sta davvero ottenendo un'area generale, non una misura precisa. È interessante notare che gli utenti sembrano disegnare più lentamente per forme più precise, quindi questa soluzione funziona molto meglio di quanto immaginassi, ma non è così bella come potrebbe essere. Questo funzionerà per il cliente, quindi anche se non c'è motivo di proseguire ulteriormente, mi piace imparare cose nuove e passerò un po 'di tempo a cercare equazioni minime lineari e vedere se riesco a suonare una classe che farà questi calcoli per me. Se qualcuno si imbatte in un codice AS3 per questo tipo di cose, o vorrebbe qualcuno dei miei, fammi sapere, questo è un puzzle interessante.

Answer 2

Sembra un sacco di lavoro per trasformare i pixel in curve di Bezier. Potresti provare a usare qualcosa come l'algoritmo Linear minimi quadrati. http://en.wikipedia.org/wiki/Linear_least_squares

Un tocco diverso, potresti far disegnare invece la tua grafica vettoriale ai tuoi utenti? In questo modo puoi semplicemente memorizzare le forme nel database.

Un altro metodo interessante per convertire raster in vettoriale sarebbe qualcosa di simile a questo programma iterativo: http://rogeralsing.com/2008/12/07/genetic-programming-evolution-of-mona-lisa/

Buona fortuna

Answer 3

Nella mia risposta a questa domanda discuto usando autotrace per convertire bitmap in bezier. Consiglio di passare il tuo utente disegnando questo programma sul server. Autotrace fa un ottimo lavoro nel tracciare e semplificare, quindi non è necessario provare a reinventare la ruota qui.