diff -r 8393d3473b98 -r 0e29ae4568a0 front_idill/src/search/js/searchCanvas.js --- 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 = ''; - + //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)