Avoir un canvas quadrillé

Bonjour leyeno,
J'ai eu le même "défi" récemment, créer une grille pour positionner les éléments. Cette grille devait avoir des propriétés magnétiques afin que les éléments "collent" aux lignes.

J'ai développé ma propre classe qui crée une grille en fonctions de divers paramètres (notamment la taille du canvas). Cette grille est ensuite ajoutée au dessus du canvas.

En plus t'as de la chance, je viens de vaguement commenter mon code :

classe LCMagneticGrid :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
package LCUtils
{
	import flash.display.Shape;
 
	import mx.containers.Canvas;
	import mx.core.UIComponent;
 
	/**
	 * Cette classe gère la grille magnétique de l'application.
	 * Cela comprend la création de l'objet graphique et 
	 * le calcul de la "ligne magnétique" la plus proche d'une position donnée.
	 */ 
	public class LCMagneticGrid
	{
		// élément graphique de la grille magnétique
		private var gridShape : Shape ;
 
		//coordonnées des lignes magnétiques 
		private var horizontalSnappers : Array ;
		private var verticalSnappers : Array ;
 
		//position de l'élément à tester.
		private var testElementXPosition : Number ;
		private var testElementYPosition : Number ;
 
		// intervale entre les lignes.
		private var step : int ;
 
		/*
			initialisation de la grille en fonction des valeurs passées en paramètre.
		*/
		public function LCMagneticGrid(aWidth : int ,
							aHeight : int ,
							aStep : int = 10 ,
							aLineThickness : int = 1 ,
							aLineColor : uint = 0 ,
							aLineAlpha :  Number = 0.5 )
		{
			this.gridShape = new Shape() ;
			this.horizontalSnappers = new  Array() ;
			this.verticalSnappers =  new Array () ; 
			this.step = aStep * LCConstants.MILLIMETER_TO_PIXEL_RATIO ;
			this.createMagneticGrid(aWidth , aHeight , aLineThickness , aLineColor  , aLineAlpha ) ; 
		}
 
 
		/*
			création de l'objet graphique de la grille magnétique.
			initialisation des tableaux stockant les coordonnées horizontales & verticales
			des lignes magnétiques.
		*/
		private function createMagneticGrid ( aWidth : int ,
								aHeight : int ,
								aLineThickness : int ,
								aLineColor : uint  ,					aLineAlpha :  Number ) : void
		{
			this.gridShape = new Shape () ;
			this.gridShape.graphics.lineStyle(aLineThickness, aLineColor,aLineAlpha);
 
			var currentPosition : int = 0 ;
 
			this.gridShape.graphics.moveTo(0,0);
			while (	currentPosition <= aHeight ) 
			{
				this.gridShape.graphics.lineTo(aWidth ,currentPosition) ;
				this.verticalSnappers.push (currentPosition) ;
 
				currentPosition += this.step ;
				this.gridShape.graphics.moveTo(0 , currentPosition) ;	
			}
 
			currentPosition = 0 ;
			this.gridShape.graphics.moveTo(0,0);
 
			while (currentPosition <= aWidth)
			{
				this.gridShape.graphics.lineTo(currentPosition , aHeight) ;
				this.horizontalSnappers.push (currentPosition);
 
				currentPosition += this.step ;
				this.gridShape.graphics.moveTo(currentPosition , 0);	
			} 
		}
 
		/*
			Ajoute dans un conteneur la grille magnétique crée précédemment.
		*/
		public function getMagneticGrid (aContainer : Canvas) : void
		{
			var conteneur : UIComponent = new UIComponent();
			conteneur.addChild(this.gridShape) ;
			conteneur.includeInLayout = false ;
 
			aContainer.addChild(conteneur) ;
		}
 
		/*
			Si l'element est proche d'une ligne horizontale, 
			les coordonnées de cette dernière sont retournées.
		*/
		public function isElementSnappingToX (anElementXPosition : Number) : Number
		{
			this.testElementXPosition = anElementXPosition ;
 
			// on récupère l'ensemble des lignes proches de la position de l'élément.
			var result : Array = this.horizontalSnappers.filter(snapsToX) ;
 
			if (result.length > 0)
			{ return result.pop(); }
			else
			{ return LCConstants.NO_INT_VALUE ; }
 
		}
 
		/*
			Si l'element est proche d'une ligne verticale, 
			les coordonnées de cette dernière sont retournées.
		*/
		public function isElementSnappingToY (anElementYPosition : Number) : Number
		{
			this.testElementYPosition = anElementYPosition ;
 
			// on récupère l'ensemble des lignes proches de la position de l'élément.
			var result : Array = this.verticalSnappers.filter(snapsToY) ;
 
			if (result.length > 0)
			{ return result.pop(); }
			else
			{ return LCConstants.NO_INT_VALUE ; }
		}
 
		/*
			retourne vrai si l'element est à proximité de la grille.
		*/
		private function snapsToX (element : Number , index : int , arr :Array) : Boolean
		{ 
			var minMagnet : Number = element - this.step/3  ;
			var maxMagnet : Number = element + this.step/3 ;
			return ((testElementXPosition > minMagnet) && (testElementXPosition < maxMagnet)) ; 
		}
 
		/*
			retourne vrai si l'element est à proximité de la grille.
		*/
		private function snapsToY (element : Number , index : int , arr : Array) : Boolean
		{
			var minMagnet : Number = element - this.step/3  ;
			var maxMagnet : Number = element + this.step/3 ;
			return ((testElementYPosition > minMagnet) && (testElementYPosition < maxMagnet)) ; 
		}
	}
}

Ensuite, pour ce qui est de la partie magnétisme, j'écoute les déplacements des éléments et j'appelle les fonctions snapsToX et snapsToY depuis le contrôleur qui gère mon canvas.

Voila, j'espère que ça pourra t'aider.
Au moins tu saura comment dessiner une grille ;)