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

Question

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

Je travaille sur un projet pour un client qui nécessite une fonctionnalité 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 contenant les positions d'ancrage / de contrôle d'une forme de Bézier, afin de pouvoir le retirer plus tard et le masquer à nouveau. Tout cela est assez facile à faire, à une exception près: je dois créer l'objet Bézier à partir d'un plan dessiné par l'utilisateur.

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

avec la souris enfoncée, créez une nouvelle image-objet, beginFill et moveTo mouse position.

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

sur la souris vers le haut, endFill.

Tout cela fonctionne à merveille. Je pourrais simplement stocker les informations ici, mais je regarderais un objet GIGANTIC plein de tonnes de jolies coordonnées x / y inutiles, et aucun moyen d’apporter des modifications précises au-delà de la mise en place de poignées sur chaque pixel. (Je peux aussi bien donner à l'utilisateur final un outil au crayon ...)

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

1: Déterminez quand je dois créer une nouvelle courbe et suivez le xy du pixel sur cet intervalle. J'imagine qu'il ne s'agit que d'un nombre de pixels, mais peut-être simplement incrémenter une variable de nombre par déplacement de souris et en créer une nouvelle tous les x pixels. Le problème ici est que certaines courbes seraient inexactes et d’autres inutiles, mais j’ai simplement besoin d’un domaine général, et non d’une représentation exacte, pour que cela puisse fonctionner. Je serais cependant plus heureux avec quelque chose d'un peu plus intelligent.

2: prenez chaque nouveau x / y, enregistrez-le comme une ancre et déterminez où un contrôle ira pour créer une courbe linéaire entre cette dernière et la dernière. c'est là que je suis vraiment suspendu. Je suis sûr que quelqu'un a fait cela en flash, mais aucune quantité de recherche sur Google ne semble pouvoir m'aider à trouver le moyen de le faire. J'ai fait beaucoup d'esquisses et de calculs simples, mais je n'arrive pas à trouver un moyen de convertir des pixels en beziers.

Est-ce possible? Tout ce dont j'ai besoin, c'est de quelque chose qui se rapproche de la même forme. Je songe peut-être à ne placer les ancres que lorsque l'angle du pixel suivant est supérieur à 180 degrés par rapport à la ligne actuelle ou à quelque chose du genre, et à simplement saisir le bord de l'arc entre ces changements, Je n'arrive pas à comprendre comment faire fonctionner cela!

Merci pour votre aide, je publierai mes progrès ici au fur et à mesure, je pense que cela pourrait être vraiment utile dans de nombreuses applications, à condition que ce soit réellement réalisable ...

Jesse

Answer 1

Merci pour les réponses, bien que je suppose que je devrais probablement être plus spécifique à propos de l'application. En réalité, je n'ai besoin que d'un contour pour un masque. La conversion d'images en vecteurs ou en polygones, même si cool, n'est pas vraiment résoudre mon problème. L’algorithme des moindres carrés linéaires 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 en ce moment, je compte juste les mouvements de la souris, puis chaque X (jouant avec elle pour obtenir la courbe la plus désirable) se déplace, je saisis 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 qu’il s’agit simplement d’obtenir une zone générale, et non un ajustement précis. Fait intéressant, les utilisateurs semblent dessiner plus lentement pour des formes plus précises. Cette solution fonctionne donc beaucoup mieux que je ne l’avais imaginé, mais elle n’est pas aussi belle qu’elle pourrait l’être. Cela fonctionnera pour le client, donc bien qu'il n'y ait aucune raison d'aller plus loin, j'aime apprendre de nouvelles choses et vais passer du temps à regarder les équations les moins linéaires et voir si je peux trouver un cours qui fera ces calculs. pour moi. Si vous rencontrez du code AS3 pour ce type de problème ou si vous voulez du mien, faites-le-moi savoir, il s'agit d'un casse-tête intéressant.

Answer 2

Transformer les pixels en courbes de Bézier semble demander beaucoup de travail. Vous pouvez essayer d'utiliser quelque chose comme l'algorithme des moindres carrés linéaire. http://en.wikipedia.org/wiki/Linear_least_squares

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

Une autre méthode intéressante de conversion de raster en vecteur serait la suivante: http://rogeralsing.com/2008/12/07/genetic-programming-evolution-of-mona-lisa/

Bonne chance

Answer 3

Dans ma réponse à cette question , je discute de l’utilisation de autotrace pour convertir des bitmaps en fichiers de Béziers. Je recommande de laisser votre utilisateur dessiner par ce programme sur le serveur. Autotrace fait un travail fantastique de traçage et de simplification. Il n’est donc pas nécessaire de tenter de réinventer la roue.