1 function searchCanvas(_canvasTop, _canvasLeft, _canvasWidth, _canvasHeight, _margin_top, _fadeTime, _inMosaic) |
1 |
2 { |
2 /* |
|
3 * Déclaration du canvas de recherche par courbes. |
|
4 */ |
|
5 function searchCanvas(_canvasTop, _canvasLeft, _canvasWidth, _canvasHeight, _margin_top, _fadeTime, _inMosaic, _mosaic) |
|
6 { |
|
7 //Coordonnées, dimensions et autres paramètres du canvas. |
3 this.canvasTop = _canvasTop; |
8 this.canvasTop = _canvasTop; |
4 this.canvasLeft = _canvasLeft; |
9 this.canvasLeft = _canvasLeft; |
5 this.canvasWidth = _canvasWidth; |
10 this.canvasWidth = _canvasWidth; |
6 this.canvasHeight = _canvasHeight; |
11 this.canvasHeight = _canvasHeight; |
7 this.fadeTime = _fadeTime; |
12 this.fadeTime = _fadeTime; |
8 this.margin_top = _margin_top; |
13 this.margin_top = _margin_top; |
9 |
14 |
10 //tool.fixedDistance = 10; |
15 this.mosaic = _mosaic; |
|
16 |
|
17 //Courbe du pointeur principal. |
11 this.mainPath; |
18 this.mainPath; |
12 this.mainPathStroke; |
19 this.mainPathStroke; |
13 this.mainLastPoint; |
20 |
|
21 //Courbe du pointeur secondaire. |
14 this.secondPath; |
22 this.secondPath; |
15 this.secondPathStroke; |
23 this.secondPathStroke; |
|
24 |
|
25 //Courbe indicatrice de la direction actuelle. |
|
26 this.direction; |
|
27 |
|
28 //Point précédent des pointeurs. |
|
29 this.mainLastPoint; |
16 this.secondLastPoint; |
30 this.secondLastPoint; |
17 |
31 |
|
32 //Coordonnées précédentes des pointeurs. |
|
33 this.mainPointerLastX; |
|
34 this.mainPointerLastY; |
|
35 this.secondPointerLastX; |
|
36 this.secondPointerLastY; |
|
37 |
18 this.inMosaic = _inMosaic; |
38 this.inMosaic = _inMosaic; |
19 |
39 |
20 this.hitTool = new paper.Tool(); |
40 this.detector; |
21 this.hitTool.fixedDistance = 10; |
|
22 this.hitTool.activate(); |
|
23 } |
41 } |
24 |
42 |
25 searchCanvas.prototype.create = function() |
43 /* |
|
44 * Fonction d'initialisation du canvas de recherche par courbes. |
|
45 */ |
|
46 searchCanvas.prototype.create = function(dictionary) |
26 { |
47 { |
27 var _this = this; |
48 var _this = this; |
28 |
49 |
|
50 //On crée le canvas. |
29 var canvas = '<canvas id="paperCanvas" width="' + this.canvasWidth + 'px" height="' + this.canvasHeight + 'px" class="canvas"></canvas>'; |
51 var canvas = '<canvas id="paperCanvas" width="' + this.canvasWidth + 'px" height="' + this.canvasHeight + 'px" class="canvas"></canvas>'; |
30 |
52 //On l'ajoute à la page. |
31 $('body').append(canvas); |
53 $('body').append(canvas); |
32 |
54 |
33 $('.canvas').css( |
55 $('.canvas').css( |
34 { |
56 { |
35 top: this.canvasTop, |
57 top: this.canvasTop, |
36 left: this.canvasLeft |
58 left: this.canvasLeft |
37 }); |
59 }); |
38 |
60 |
|
61 //S'il est dans la mosaique, on le réhausse en fonction de la taille de la marge verticale. |
39 if(this.inMosaic) |
62 if(this.inMosaic) |
40 { |
63 { |
41 console.log(this.margin_top); |
64 console.log(this.margin_top); |
42 $('.canvas').css( |
65 $('.canvas').css( |
43 { |
66 { |
44 "margin-top": this.margin_top |
67 "margin-top": this.margin_top |
45 }); |
68 }); |
46 } |
69 } |
47 |
70 |
|
71 //On instancie le détecteur de courbes de recherche. |
|
72 this.detector = new curvesDetector(6, 100, dictionary, this.mosaic); |
|
73 |
|
74 //On active le canvas. |
48 paper.setup('paperCanvas'); |
75 paper.setup('paperCanvas'); |
49 |
76 }; |
50 this.hitTool.onMouseDown = this.onPointerIn; |
77 |
51 this.hitTool.onMouseDrag = this.onPointerMove; |
78 /* |
52 this.hitTool.onMouseUp = this.onPointerOut; |
79 * Fonction appelée pour quitter le mode de recherche par courbes. |
53 this.hitTool.onKeyDown = this.onKeyDown; |
80 */ |
54 }; |
|
55 |
|
56 searchCanvas.prototype.leaveSearch = function() |
81 searchCanvas.prototype.leaveSearch = function() |
57 { |
82 { |
58 $('.canvas').fadeTo(this.fadeTime, 0, function() |
83 $('.canvas').fadeTo(this.fadeTime, 0, function() |
59 { |
84 { |
60 $('.canvas').remove(); |
85 $('.canvas').remove(); |
61 }); |
86 }); |
62 }; |
87 }; |
63 |
88 |
|
89 /* |
|
90 * Fonction de déclaration des courbes. |
|
91 */ |
64 searchCanvas.prototype.onPointerIn = function(mainPointerX, mainPointerY, secondPointerX, secondPointerY) |
92 searchCanvas.prototype.onPointerIn = function(mainPointerX, mainPointerY, secondPointerX, secondPointerY) |
65 { |
93 { |
|
94 //On obtient les coordonnées du pointeur principal en px. |
|
95 mainPointerX = Math.floor(mainPointerX); |
|
96 mainPointerY = Math.floor(mainPointerY); |
|
97 |
|
98 //On forme le contour la courbe principale. |
66 this.mainPathStroke = new paper.Path(); |
99 this.mainPathStroke = new paper.Path(); |
|
100 this.mainPathStroke.strokeColor = '#366F7A'; |
|
101 this.mainPathStroke.strokeWidth = 18; |
|
102 this.mainPathStroke.strokeCap = 'round'; |
|
103 this.mainPathStroke.strokeJoin = 'round'; |
|
104 |
|
105 //On forme la courbe principale. |
67 this.mainPath = new paper.Path(); |
106 this.mainPath = new paper.Path(); |
68 this.secondPathStroke = new paper.Path(); |
107 this.mainPath.strokeColor = '#02FEFF'; |
69 this.secondPath = new paper.Path(); |
108 this.mainPath.strokeWidth = 10; |
70 |
109 this.mainPath.strokeCap = 'round'; |
71 this.mainPathStroke.fillColor = '#366F7A'; |
110 this.mainPath.strokeJoin = 'round'; |
72 this.mainPath.fillColor = '#02FEFF'; |
111 |
73 this.secondPathStroke.fillColor = '#366F7A'; |
112 this.direction = new paper.Path(); |
74 this.secondPath.fillColor = '#02FEFF'; |
113 this.direction.strokeColor = '#FF0000'; |
75 |
114 this.direction.strokeWidth = 5; |
76 // var pointerX = e.point.x, pointerY = e.point.y; |
115 this.direction.strokeCap = 'round'; |
77 |
116 this.direction.strokeJoin = 'round'; |
78 console.log('IN'); |
117 |
79 |
118 //Si on a un pointeur secondaire |
|
119 if(secondPointerX && secondPointerY) |
|
120 { |
|
121 //On obtient les coordonnées du pointeur secondaire en px. |
|
122 secondPointerX = Math.floor(secondPointerX); |
|
123 secondPointerY = Math.floor(secondPointerY); |
|
124 |
|
125 //On forme le contour de la courbe secondaire. |
|
126 this.secondPathStroke = new paper.Path(); |
|
127 this.secondPathStroke.fillColor = '#366F7A'; |
|
128 this.secondPathStroke.strokeWidth = 12; |
|
129 this.secondPathStroke.strokeCap = 'round'; |
|
130 this.secondPathStroke.strokeJoin = 'round'; |
|
131 |
|
132 //On forme la courbe secondaire. |
|
133 this.secondPath = new paper.Path(); |
|
134 this.secondPath.fillColor = '#02FEFF'; |
|
135 this.secondPath.strokeWidth = 10; |
|
136 this.secondPath.strokeCap = 'round'; |
|
137 this.secondPath.strokeJoin = 'round'; |
|
138 } |
|
139 |
|
140 // console.log('IN'); |
|
141 |
|
142 //On raffraichit l'affichage. |
|
143 paper.view.draw(); |
|
144 }; |
|
145 |
|
146 /* |
|
147 * Fonction appelée lorsque les pointeurs bougent pour construire la courbe. |
|
148 */ |
|
149 searchCanvas.prototype.onPointerMove = function(mainPointerX, mainPointerY, secondPointerX, secondPointerY) |
|
150 { |
|
151 // console.log('MOVE'); |
|
152 |
|
153 if(!this.mainPointerLastX || !this.mainPointerLastY) |
|
154 { |
|
155 this.mainPointerLastX = mainPointerX; |
|
156 this.mainPointerLastY = mainPointerY; |
|
157 } |
|
158 |
|
159 //On obtient les coordonnées du pointeur principal en px. |
|
160 mainPointerX = Math.floor(mainPointerX); |
|
161 mainPointerY = Math.floor(mainPointerY); |
|
162 |
|
163 //On crée les points de la courbe principale. |
80 var mainPoint = new paper.Point(mainPointerX, mainPointerY); |
164 var mainPoint = new paper.Point(mainPointerX, mainPointerY); |
81 var secondPoint = new paper.Point(secondPointerX, secondPointerY); |
165 var mainPointStroke = new paper.Point(mainPointerX, mainPointerY); |
82 |
166 |
83 if(!this.mainLastPoint) |
167 //On les ajoute à la courbe. |
84 { |
168 this.mainPathStroke.add(mainPointStroke); |
85 this.mainLastPoint = mainPoint; |
169 this.mainPathStroke.smooth(); |
86 } |
170 |
87 if(!this.secondLastPoint) |
171 this.mainPath.add(mainPoint); |
88 { |
172 this.mainPath.smooth(); |
89 this.secondLastPoint = secondPoint; |
173 |
90 } |
174 //this.direction.remove(); |
91 }; |
175 // console.log(this.mainPointerLastX, this.mainPointerLastY); |
92 |
176 var directionPoint = new paper.Point(this.mainPointerLastX, this.mainPointerLastY); |
93 searchCanvas.prototype.onPointerMove = function(mainPointerX, mainPointerY, secondPointerX, secondPointerY) |
177 var directionPointEnd = new paper.Point((mainPointerX - this.mainPointerLastX) * 2 + mainPointerX, (mainPointerY - this.mainPointerLastY) * 2 + mainPointerY); |
94 { |
178 this.direction.add(directionPoint); |
95 // var pointerX = e.point.x, pointerY = e.point.y; |
179 this.direction.add(directionPointEnd); |
96 |
180 this.direction.smooth(); |
97 var mainPoint = new paper.Point(mainPointerX, mainPointerY); |
181 |
98 var secondPoint = new paper.Point(secondPointerX, secondPointerY); |
182 //Variables de construction de la courbe secondaire. |
99 // var delta = new paper.Point(point.x - this.lastPoint.x, point.y - this.lastPoint.y); |
183 var secondPoint, secondDelta, secondStep, secondStepStroke, secondTop, secondBottom, secondTopStroke, secondBottomStroke; |
100 var mainDelta = new paper.Point(15, 15); |
184 |
101 var secondDelta = new paper.Point(15, 15); |
185 //Si on a un pointeur secondaire. |
102 |
186 if(secondPointerX && secondPointerY) |
103 this.mainLastPoint = mainPoint; |
187 { |
104 this.secondLastPoint = secondPoint; |
188 //On obtient les coordonnées du pointeur secondaire en px. |
105 |
189 secondPointerX = Math.floor(secondPointerX); |
106 var mainStep = mainDelta.divide(new paper.Point(4, 4)); |
190 secondPointerY = Math.floor(secondPointerY); |
107 var secondStep = secondDelta.divide(new paper.Point(4, 4)); |
191 |
108 |
192 //On crée les points de la courbe secondaire. |
109 var mainStepStroke = mainDelta.divide(new paper.Point(2, 2)); |
193 secondPoint = new paper.Point(mainPointerX, mainPointerY); |
110 mainStep.angle += 90; |
194 secondPointStroke = new paper.Point(mainPointerX, mainPointerY); |
111 mainStepStroke.angle += 90; |
195 |
112 var secondStepStroke = secondDelta.divide(new paper.Point(2, 2)); |
196 //On les ajoute à la courbe. |
113 secondStep.angle += 90; |
197 this.secondPathStroke.add(secondPointStroke); |
114 secondStepStroke.angle += 90; |
198 this.secondPathStroke.smooth(); |
115 |
199 |
116 var mainTop = mainPoint.add(mainStep); |
200 this.secondPath.add(secondPoint); |
117 var mainBottom = mainPoint.add(mainStep.negate()); |
201 this.secondPath.smooth(); |
118 var secondTop = secondPoint.add(secondStep); |
202 } |
119 var secondBottom = secondPoint.add(secondStep.negate()); |
203 |
120 |
204 if(this.mainPointerLastX != mainPointerX) |
121 var mainTopStroke = mainPoint.add(mainStepStroke); |
205 { |
122 var mainBottomStroke = mainPoint.add(mainStepStroke.negate()); |
206 this.mainPointerLastX = mainPointerX; |
123 var secondTopStroke = secondPoint.add(secondStepStroke); |
207 } |
124 var secondBottomStroke = secondPoint.add(secondStepStroke.negate()); |
208 if(this.mainPointerLastY != mainPointerY) |
125 |
209 { |
126 this.mainPath.add(mainTop); |
210 this.mainPointerLastY = mainPointerY; |
127 this.mainPath.insert(0, mainBottom); |
211 } |
128 this.mainPath.smooth(); |
212 |
129 |
213 //On met à jour les points dans le détecteur de courbes. |
130 this.secondPath.add(secondTop); |
214 this.detector.updatePos(mainPointerX, mainPointerY); |
131 this.secondPath.insert(0, secondBottom); |
215 |
132 this.secondPath.smooth(); |
216 //On met à jour l'affichage. |
133 |
|
134 this.mainPathStroke.add(mainTopStroke); |
|
135 this.mainPathStroke.insert(0, mainBottomStroke); |
|
136 this.mainPathStroke.smooth(); |
|
137 |
|
138 this.secondPathStroke.add(secondTopStroke); |
|
139 this.secondPathStroke.insert(0, secondBottomStroke); |
|
140 this.secondPathStroke.smooth(); |
|
141 |
|
142 paper.view.draw(); |
217 paper.view.draw(); |
143 }; |
218 }; |
144 |
219 |
|
220 /* |
|
221 * Fonction appelée lorsqu'on cesse de dessiner une courbe. |
|
222 */ |
145 searchCanvas.prototype.onPointerOut = function() |
223 searchCanvas.prototype.onPointerOut = function() |
146 { |
224 { |
|
225 // console.log('OUT'); |
|
226 |
|
227 //On réinitialise la courbe principale. |
147 this.mainPathStroke.remove(); |
228 this.mainPathStroke.remove(); |
148 this.mainPath.remove(); |
229 this.mainPath.remove(); |
149 this.mainLastPoint = null; |
230 |
150 |
231 this.mainPointerLastX = 0; |
151 this.secondPathStroke.remove(); |
232 this.mainPointerLastY = 0; |
152 this.secondPath.remove(); |
233 |
153 this.secondLastPoint = null; |
234 this.direction.remove(); |
|
235 |
|
236 this.detector.reinit(); |
|
237 |
|
238 //Si on a un second pointeur, on réinitialise la courbe secondaire. |
|
239 if(this.secondPathStroke) |
|
240 { |
|
241 this.secondPathStroke.remove(); |
|
242 } |
|
243 if(this.secondPath) |
|
244 { |
|
245 this.secondPath.remove(); |
|
246 } |
|
247 |
|
248 //On met à jour l'affichage. |
|
249 paper.view.draw(); |
154 }; |
250 }; |
155 |
251 |
156 searchCanvas.prototype.onKeyDown = function(event) |
252 searchCanvas.prototype.onKeyDown = function(event) |
157 { |
253 { |
158 //S'il n'y a rien a colorier, on quitte. |
254 //S'il n'y a rien a colorier, on quitte. |