Alignement des formes sur un plan, Algoryhtm

Question

Je développe un outil simple de diagramme avec des formes sur un plan en utilisant Flex. d'abord, j'utilisais une simple grille 20 * 20.

Mais le vrai trucs cool leur effet est aimant hache automatique, voilà comment je l'appelle au moins pour voir pourquoi je veux dire par là je l'ai fait une petite vidéo de Balsamiq.

http://screenr.com/clB

http://www.balsamiq.com/

Comme vous pouvez le voir aligne sur la bordure horizontale et verticale des axes centraux.

• frontières: axes de gris
• align Horizontal (hauteur/2) Centre: ax bleu
• n hache alignement vertical (largeur/2)
• Certains intermédiaires d'espace de remplissage de 25px: axes verts

Comment pensez-vous de travail tels algorithmes: Pour je ferai maintenant sans rotation.

donné une forme S1 sélectionné à la position en haut à gauche x, y de largeur w et la hauteur h.

Regardez toutes les formes se croisent deux zones:

de xmin = x, xmax = x + w pour y> 0.

de Yming = y, ymax = y + h pour x> 0.

Une fois que j'ai la liste de forme concernée i vérifier si les conditions MATCHES

Quand j'utilise '=' son approximation + ou - 2 pixels donneront l'effet voulu 'aimant'

• S1 x = S'x => ligne grise à x
• S1 x + w = ​​S'x => ligne grise à x + w
• S1 y = S'y => ligne grise à y
• S1 y + h = S'y => ligne grise à y + h
• S1 x = S'x et S1 x + w = ​​w + S'x => ligne bleue à x + w/2

et étant donné un aimant de remplissage de 20 px

• S1 x = S'x + PADD => greenline au S1 x
• S1 x = S'x - PADD => greenline au S1 x
• S1 y = S'y + PADD => ligne verte à S1 y
• S1 y = S'y - PADD => ligne verte à S1 y

Quelle est votre opinion à ce sujet?

Answer 1

J'ai écrit l'algorithme d'accrochage de Balsamiq. Vous êtes assez proche. La seule chose "intelligente" que nous faisons (si je peux le dire moi-même), est de pré-remplir deux tableaux clairsemés avec des coordonnées d'accrochage surMouseDown, de sorte qu'ils soient faciles/rapides/bon marché pour rechercher surMouseMove. Ce que je fais onMouseDown est la suivante:

de PARLONS sur les coordonnées x (puis répétez la même chose pour y):

• disent GRAVITY est 5
• regard sur toutes les formes
• pour chaque forme , regardez le bord gauche, disent qu'il est à 100 Peupler les xSnappingPositions objet de 100 GRAVITY (95) à 100 + GRAVITY (105) avec le numéro 100. Répétez l'opération pour le bord droit

Puis, quand vous faites une onMouseMov e, vous regardez le contrôle que vous faites glisser x et y. Y at-il quelque chose dans xSnappingPositions et ySnappingPosition qui correspond maintenant au bord gauche? Si c'est le cas, allez à la valeur sauvegardée dans le tableau au lieu d'utiliser la position détectée par la souris (c'est-à-dire, accrochez-vous sur elle). Répétez la vérification pour le bord droit, le centre, etc.

J'espère que cela aide!