--- a/front_idill/src/search/js/searchCanvas.js Fri Jun 29 16:16:24 2012 +0200
+++ b/front_idill/src/search/js/searchCanvas.js Thu Jul 05 16:04:33 2012 +0200
@@ -1,5 +1,10 @@
-function searchCanvas(_canvasTop, _canvasLeft, _canvasWidth, _canvasHeight, _margin_top, _fadeTime, _inMosaic)
+
+/*
+ * Déclaration du canvas de recherche par courbes.
+*/
+function searchCanvas(_canvasTop, _canvasLeft, _canvasWidth, _canvasHeight, _margin_top, _fadeTime, _inMosaic, _mosaic)
{
+ //Coordonnées, dimensions et autres paramètres du canvas.
this.canvasTop = _canvasTop;
this.canvasLeft = _canvasLeft;
this.canvasWidth = _canvasWidth;
@@ -7,27 +12,44 @@
this.fadeTime = _fadeTime;
this.margin_top = _margin_top;
- //tool.fixedDistance = 10;
+ this.mosaic = _mosaic;
+
+ //Courbe du pointeur principal.
this.mainPath;
this.mainPathStroke;
- this.mainLastPoint;
+
+ //Courbe du pointeur secondaire.
this.secondPath;
this.secondPathStroke;
+
+ //Courbe indicatrice de la direction actuelle.
+ this.direction;
+
+ //Point précédent des pointeurs.
+ this.mainLastPoint;
this.secondLastPoint;
+ //Coordonnées précédentes des pointeurs.
+ this.mainPointerLastX;
+ this.mainPointerLastY;
+ this.secondPointerLastX;
+ this.secondPointerLastY;
+
this.inMosaic = _inMosaic;
- this.hitTool = new paper.Tool();
- this.hitTool.fixedDistance = 10;
- this.hitTool.activate();
+ this.detector;
}
-searchCanvas.prototype.create = function()
+/*
+ * Fonction d'initialisation du canvas de recherche par courbes.
+*/
+searchCanvas.prototype.create = function(dictionary)
{
var _this = this;
+ //On crée le canvas.
var canvas = '<canvas id="paperCanvas" width="' + this.canvasWidth + 'px" height="' + this.canvasHeight + 'px" class="canvas"></canvas>';
-
+ //On l'ajoute à la page.
$('body').append(canvas);
$('.canvas').css(
@@ -36,6 +58,7 @@
left: this.canvasLeft
});
+ //S'il est dans la mosaique, on le réhausse en fonction de la taille de la marge verticale.
if(this.inMosaic)
{
console.log(this.margin_top);
@@ -45,14 +68,16 @@
});
}
- paper.setup('paperCanvas');
+ //On instancie le détecteur de courbes de recherche.
+ this.detector = new curvesDetector(6, 100, dictionary, this.mosaic);
- this.hitTool.onMouseDown = this.onPointerIn;
- this.hitTool.onMouseDrag = this.onPointerMove;
- this.hitTool.onMouseUp = this.onPointerOut;
- this.hitTool.onKeyDown = this.onKeyDown;
+ //On active le canvas.
+ paper.setup('paperCanvas');
};
+/*
+ * Fonction appelée pour quitter le mode de recherche par courbes.
+*/
searchCanvas.prototype.leaveSearch = function()
{
$('.canvas').fadeTo(this.fadeTime, 0, function()
@@ -61,96 +86,167 @@
});
};
+/*
+ * Fonction de déclaration des courbes.
+*/
searchCanvas.prototype.onPointerIn = function(mainPointerX, mainPointerY, secondPointerX, secondPointerY)
{
- this.mainPathStroke = new paper.Path();
- this.mainPath = new paper.Path();
- this.secondPathStroke = new paper.Path();
- this.secondPath = new paper.Path();
+ //On obtient les coordonnées du pointeur principal en px.
+ mainPointerX = Math.floor(mainPointerX);
+ mainPointerY = Math.floor(mainPointerY);
- this.mainPathStroke.fillColor = '#366F7A';
- this.mainPath.fillColor = '#02FEFF';
- this.secondPathStroke.fillColor = '#366F7A';
- this.secondPath.fillColor = '#02FEFF';
-
- // var pointerX = e.point.x, pointerY = e.point.y;
-
- console.log('IN');
-
- var mainPoint = new paper.Point(mainPointerX, mainPointerY);
- var secondPoint = new paper.Point(secondPointerX, secondPointerY);
+ //On forme le contour la courbe principale.
+ this.mainPathStroke = new paper.Path();
+ this.mainPathStroke.strokeColor = '#366F7A';
+ this.mainPathStroke.strokeWidth = 18;
+ this.mainPathStroke.strokeCap = 'round';
+ this.mainPathStroke.strokeJoin = 'round';
- if(!this.mainLastPoint)
- {
- this.mainLastPoint = mainPoint;
- }
- if(!this.secondLastPoint)
- {
- this.secondLastPoint = secondPoint;
- }
-};
-
-searchCanvas.prototype.onPointerMove = function(mainPointerX, mainPointerY, secondPointerX, secondPointerY)
-{
- // var pointerX = e.point.x, pointerY = e.point.y;
+ //On forme la courbe principale.
+ this.mainPath = new paper.Path();
+ this.mainPath.strokeColor = '#02FEFF';
+ this.mainPath.strokeWidth = 10;
+ this.mainPath.strokeCap = 'round';
+ this.mainPath.strokeJoin = 'round';
- var mainPoint = new paper.Point(mainPointerX, mainPointerY);
- var secondPoint = new paper.Point(secondPointerX, secondPointerY);
- // var delta = new paper.Point(point.x - this.lastPoint.x, point.y - this.lastPoint.y);
- var mainDelta = new paper.Point(15, 15);
- var secondDelta = new paper.Point(15, 15);
+ this.direction = new paper.Path();
+ this.direction.strokeColor = '#FF0000';
+ this.direction.strokeWidth = 5;
+ this.direction.strokeCap = 'round';
+ this.direction.strokeJoin = 'round';
- this.mainLastPoint = mainPoint;
- this.secondLastPoint = secondPoint;
-
- var mainStep = mainDelta.divide(new paper.Point(4, 4));
- var secondStep = secondDelta.divide(new paper.Point(4, 4));
+ //Si on a un pointeur secondaire
+ if(secondPointerX && secondPointerY)
+ {
+ //On obtient les coordonnées du pointeur secondaire en px.
+ secondPointerX = Math.floor(secondPointerX);
+ secondPointerY = Math.floor(secondPointerY);
+
+ //On forme le contour de la courbe secondaire.
+ this.secondPathStroke = new paper.Path();
+ this.secondPathStroke.fillColor = '#366F7A';
+ this.secondPathStroke.strokeWidth = 12;
+ this.secondPathStroke.strokeCap = 'round';
+ this.secondPathStroke.strokeJoin = 'round';
+
+ //On forme la courbe secondaire.
+ this.secondPath = new paper.Path();
+ this.secondPath.fillColor = '#02FEFF';
+ this.secondPath.strokeWidth = 10;
+ this.secondPath.strokeCap = 'round';
+ this.secondPath.strokeJoin = 'round';
+ }
- var mainStepStroke = mainDelta.divide(new paper.Point(2, 2));
- mainStep.angle += 90;
- mainStepStroke.angle += 90;
- var secondStepStroke = secondDelta.divide(new paper.Point(2, 2));
- secondStep.angle += 90;
- secondStepStroke.angle += 90;
-
- var mainTop = mainPoint.add(mainStep);
- var mainBottom = mainPoint.add(mainStep.negate());
- var secondTop = secondPoint.add(secondStep);
- var secondBottom = secondPoint.add(secondStep.negate());
-
- var mainTopStroke = mainPoint.add(mainStepStroke);
- var mainBottomStroke = mainPoint.add(mainStepStroke.negate());
- var secondTopStroke = secondPoint.add(secondStepStroke);
- var secondBottomStroke = secondPoint.add(secondStepStroke.negate());
-
- this.mainPath.add(mainTop);
- this.mainPath.insert(0, mainBottom);
- this.mainPath.smooth();
-
- this.secondPath.add(secondTop);
- this.secondPath.insert(0, secondBottom);
- this.secondPath.smooth();
+ // console.log('IN');
- this.mainPathStroke.add(mainTopStroke);
- this.mainPathStroke.insert(0, mainBottomStroke);
- this.mainPathStroke.smooth();
-
- this.secondPathStroke.add(secondTopStroke);
- this.secondPathStroke.insert(0, secondBottomStroke);
- this.secondPathStroke.smooth();
-
+ //On raffraichit l'affichage.
paper.view.draw();
};
+/*
+ * Fonction appelée lorsque les pointeurs bougent pour construire la courbe.
+*/
+searchCanvas.prototype.onPointerMove = function(mainPointerX, mainPointerY, secondPointerX, secondPointerY)
+{
+ // console.log('MOVE');
+
+ if(!this.mainPointerLastX || !this.mainPointerLastY)
+ {
+ this.mainPointerLastX = mainPointerX;
+ this.mainPointerLastY = mainPointerY;
+ }
+
+ //On obtient les coordonnées du pointeur principal en px.
+ mainPointerX = Math.floor(mainPointerX);
+ mainPointerY = Math.floor(mainPointerY);
+
+ //On crée les points de la courbe principale.
+ var mainPoint = new paper.Point(mainPointerX, mainPointerY);
+ var mainPointStroke = new paper.Point(mainPointerX, mainPointerY);
+
+ //On les ajoute à la courbe.
+ this.mainPathStroke.add(mainPointStroke);
+ this.mainPathStroke.smooth();
+
+ this.mainPath.add(mainPoint);
+ this.mainPath.smooth();
+
+ //this.direction.remove();
+ // console.log(this.mainPointerLastX, this.mainPointerLastY);
+ var directionPoint = new paper.Point(this.mainPointerLastX, this.mainPointerLastY);
+ var directionPointEnd = new paper.Point((mainPointerX - this.mainPointerLastX) * 2 + mainPointerX, (mainPointerY - this.mainPointerLastY) * 2 + mainPointerY);
+ this.direction.add(directionPoint);
+ this.direction.add(directionPointEnd);
+ this.direction.smooth();
+
+ //Variables de construction de la courbe secondaire.
+ var secondPoint, secondDelta, secondStep, secondStepStroke, secondTop, secondBottom, secondTopStroke, secondBottomStroke;
+
+ //Si on a un pointeur secondaire.
+ if(secondPointerX && secondPointerY)
+ {
+ //On obtient les coordonnées du pointeur secondaire en px.
+ secondPointerX = Math.floor(secondPointerX);
+ secondPointerY = Math.floor(secondPointerY);
+
+ //On crée les points de la courbe secondaire.
+ secondPoint = new paper.Point(mainPointerX, mainPointerY);
+ secondPointStroke = new paper.Point(mainPointerX, mainPointerY);
+
+ //On les ajoute à la courbe.
+ this.secondPathStroke.add(secondPointStroke);
+ this.secondPathStroke.smooth();
+
+ this.secondPath.add(secondPoint);
+ this.secondPath.smooth();
+ }
+
+ if(this.mainPointerLastX != mainPointerX)
+ {
+ this.mainPointerLastX = mainPointerX;
+ }
+ if(this.mainPointerLastY != mainPointerY)
+ {
+ this.mainPointerLastY = mainPointerY;
+ }
+
+ //On met à jour les points dans le détecteur de courbes.
+ this.detector.updatePos(mainPointerX, mainPointerY);
+
+ //On met à jour l'affichage.
+ paper.view.draw();
+};
+
+/*
+ * Fonction appelée lorsqu'on cesse de dessiner une courbe.
+*/
searchCanvas.prototype.onPointerOut = function()
{
+ // console.log('OUT');
+
+ //On réinitialise la courbe principale.
this.mainPathStroke.remove();
this.mainPath.remove();
- this.mainLastPoint = null;
+
+ this.mainPointerLastX = 0;
+ this.mainPointerLastY = 0;
+
+ this.direction.remove();
+
+ this.detector.reinit();
- this.secondPathStroke.remove();
- this.secondPath.remove();
- this.secondLastPoint = null;
+ //Si on a un second pointeur, on réinitialise la courbe secondaire.
+ if(this.secondPathStroke)
+ {
+ this.secondPathStroke.remove();
+ }
+ if(this.secondPath)
+ {
+ this.secondPath.remove();
+ }
+
+ //On met à jour l'affichage.
+ paper.view.draw();
};
searchCanvas.prototype.onKeyDown = function(event)