Conversion de pixels en courbes de Bézier dans Actionscript 3

Question

Ok, donc je vais essayer d'être aussi descriptif que possible.

Je travaille sur un projet pour un client qui nécessite une fonction de masquage de type jibjab d'une image téléchargée. J'aimerais pouvoir générer un objet stockable dans une base de données qui contient des positions d'ancrage/contrôle d'une forme bezier, de sorte que je puisse le retirer plus tard et masquer à nouveau l'objet. Tout cela est assez facile à faire, sauf pour une capture: j'ai besoin de créer l'objet bezier à partir d'un contour dessiné par l'utilisateur.

Jusqu'à présent, voici comment j'imagine que le processus en cours:

sur la souris vers le bas, créer un nouveau sprite, beginFill, et la position de la souris moveTo.

au déplacement de la souris, ligne à une coordonnée XY.

à la souris, endFill.

Tout cela fonctionne tout simplement génial. Je pourrais juste stocker l'information ici, mais je regarderais un objet GIGANTIC plein de tonnes de jolies coordonnées x/y inutiles, et aucun moyen de vraiment faire des changements de mise au point en dehors de mettre des poignées sur chaque pixel. (Je peux aussi bien donner à l'utilisateur final un outil de crayon ...)

Voici ce que je pense en ce que le calcul de la courbe de Bézier GOES:

1: la figure quand je dois commencer une nouvelle courbe et suivez le xy du pixel sur cet intervalle. J'imagine que ce n'est qu'un nombre de pixels, peut-être simplement incrémenter une variable de comptage par mouvement de souris et en faire une nouvelle tous les x pixels. Le problème ici est que certaines courbes seraient inexactes, et d'autres inutiles, mais j'ai vraiment besoin d'une zone générale, pas d'une représentation exacte, donc ça pourrait marcher. Je serais plus heureux avec quelque chose d'un peu plus intelligent. 2: prenez chaque nouveau x/y, stockez-le comme une ancre, et déterminez où un contrôle irait faire la courbe entre cette dernière et la dernière ancre. C'est là que je me suis vraiment accroché. Je suis sûr que quelqu'un l'a fait en flash, mais aucune quantité de googling ne semble pouvoir m'aider avec la façon de le faire. J'ai fait beaucoup de croquis et les quelques maths que je peux enrouler autour de mon cerveau, mais je n'arrive pas à trouver un moyen de convertir les pixels en beziers.

Est-ce possible? Tout ce dont j'ai vraiment besoin, c'est quelque chose qui se rapproche de la même forme. Je pense à placer seulement des ancres quand l'angle du pixel suivant est au-delà de 180 degrés par rapport à la ligne courante ou quelque chose, et juste saisir le bord de l'arc entre ces changements, mais peu importe comment j'essaye, je n'arrive pas à comprendre comment faire fonctionner ça!

Merci pour votre aide, je serai sûr de poster mes progrès ici que je vais, je pense que cela pourrait être très utile dans de nombreuses applications, aussi longtemps qu'il est en fait possible ...

Jesse

Answer 1

Merci pour les réponses, même si je devrais probablement être plus précis sur l'application, je n'ai vraiment besoin que d'un contour pour un masque, donc la conversion d'images en vecteurs ou polygones, malgré la fraîcheur, doesn ' t vraiment résoudre mon problème. L'algorithme linéaire des moindres carrés est méga cool, je pense que cela pourrait être plus proche de ce que je cherche.

J'ai une solution de contournement de base qui se passe en ce moment, je ne fais que compter les mouvements de la souris, puis chaque X (jouer avec elle pour obtenir la courbe la plus souhaitable), je prends la position xy. puis, je prends tous les autres xy stockés, et le transforme en ancre, les xys restants sont transformés en contrôles. Cela produit des résultats quelque peu souhaitables, mais présente quelques problèmes mineurs, en ce sens que la vitesse à laquelle le masque est dessiné affecte le nombre de poignées, et il s'agit simplement d'une zone générale, pas d'un ajustement précis. Fait intéressant, les utilisateurs semblent dessiner plus lentement pour des formes plus précises, donc cette solution fonctionne beaucoup mieux que je ne l'avais imaginé, mais ce n'est pas aussi beau que ça pourrait l'être. Cela fonctionnera pour le client, donc bien qu'il n'y ait aucune raison de continuer plus loin, j'aime apprendre de nouvelles choses, et passera un peu de temps à regarder les plus petites équations linéaires et à voir si je peux créer une classe qui fera ces calculs pour moi. Si quelqu'un parcourt un code AS3 pour ce genre de choses, ou voudrait en avoir un, faites-le moi savoir, c'est un puzzle intéressant.

Answer 2

Cela ressemble à beaucoup de travail pour transformer les pixels en courbes de Bézier. Vous pourriez essayer d'utiliser quelque chose comme l'algorithme des moindres carrés linéaires. http://en.wikipedia.org/wiki/Linear_least_squares

Un tact différent, pourriez-vous demander à vos utilisateurs de dessiner des graphiques vectoriels à la place? De cette façon, vous pouvez simplement stocker les formes dans la base de données.

Une autre méthode de conversion fraîche trame en vecteur serait quelque chose comme ce programme itératif: http://rogeralsing.com/2008/12/07/genetic-programming-evolution-of-mona-lisa/

Bonne chance

Answer 3

Dans ma réponse à this question je discute à l'aide autotrace pour convertir des bitmaps à beziers. Je recommande de passer votre dessin utilisateur à travers ce programme sur le serveur. Autotrace fait un travail fantastique de traçage et de simplification, il n'est donc pas nécessaire d'essayer de réinventer la roue ici.