1 function searchCanvas(_canvasTop, _canvasLeft, _canvasWidth, _canvasHeight, _margin_top, _fadeTime, _inMosaic)

     2 {

     3 	this.canvasTop = _canvasTop;

     4 	this.canvasLeft = _canvasLeft;

     5 	this.canvasWidth = _canvasWidth;

     6 	this.canvasHeight = _canvasHeight;

     7 	this.fadeTime = _fadeTime;

     8 	this.margin_top = _margin_top;

     9 	

    10 	//tool.fixedDistance = 10;

    11 	this.path;

    12 	this.pathStroke;

    13 	this.lastPoint;

    14 	

    15 	this.inMosaic = _inMosaic;

    16 	

    17 	this.hitTool = new paper.Tool();

    18 	this.hitTool.fixedDistance = 10;

    19 	this.hitTool.activate();

    20 }

    21 

    22 searchCanvas.prototype.create = function()

    23 {

    24 	var _this = this;

    25 	

    26 	var canvas = '<canvas id="paperCanvas" width="' + this.canvasWidth + 'px" height="' + this.canvasHeight + 'px" class="canvas"></canvas>';

    27 	

    28 	$('body').append(canvas);

    29 	

    30 	$('.canvas').css(

    31 	{

    32 		top: this.canvasTop,

    33 		left: this.canvasLeft

    34 	});

    35 	

    36 	if(this.inMosaic)

    37 	{

    38 		console.log(this.margin_top);

    39 		$('.canvas').css(

    40 		{

    41 			"margin-top": this.margin_top

    42 		});

    43 	}

    44 	

    45 	paper.setup('paperCanvas');

    46 	

    47 	this.hitTool.onMouseDown = this.onMouseDown;

    48 	this.hitTool.onMouseDrag = this.onMouseDrag;

    49 	this.hitTool.onMouseUp = this.onMouseUp;

    50 	this.hitTool.onKeyDown = this.onKeyDown;

    51 };

    52 

    53 searchCanvas.prototype.leaveSearch = function()

    54 {

    55 	$('.canvas').fadeTo(this.fadeTime, 0, function()

    56 	{

    57 		$('.canvas').remove();

    58 	});

    59 };

    60 

    61 searchCanvas.prototype.onMouseDown = function(event)

    62 {

    63 	this.pathStroke = new paper.Path();

    64 	this.path = new paper.Path();

    65 	

    66 	this.pathStroke.fillColor = '#366F7A';

    67 	this.path.fillColor = '#02FEFF';

    68 	

    69 	this.pathStroke.add(event.point);

    70 };

    71 

    72 searchCanvas.prototype.onMouseDrag = function(event)

    73 {

    74 	var step = event.delta.divide(new paper.Point(4, 4));

    75 	var stepStroke = event.delta.divide(new paper.Point(2, 2));

    76 	step.angle += 90;

    77 	stepStroke.angle += 90;

    78 

    79 	var top = event.middlePoint.add(step);

    80 	var bottom = event.middlePoint.add(step.negate());

    81 

    82 	var topStroke = event.middlePoint.add(stepStroke);

    83 	var bottomStroke = event.middlePoint.add(stepStroke.negate());

    84 

    85 	this.path.add(top);

    86 	this.path.insert(0, bottom);

    87     this.path.smooth();

    88 	

    89 	this.pathStroke.add(topStroke);

    90 	this.pathStroke.insert(0, bottomStroke);

    91     this.pathStroke.smooth();

    92 };

    93 

    94 searchCanvas.prototype.onMouseUp = function(event)

    95 {

    96 	this.pathStroke.remove();

    97 	this.path.remove();

    98 };

    99 

   100 searchCanvas.prototype.onKeyDown = function(event)

   101 {

   102 	//S'il n'y a rien a colorier, on quitte.

   103 	if(typeof this.pathStroke === 'undefined' || typeof this.path === 'undefined')

   104 		return;

   105 	

   106 	if(event.key == 'r' || event.key == 'R')

   107 	{

   108 		this.pathStroke.fillColor = '#49564F';

   109 		this.path.fillColor = '#00FE00'

   110 	}

   111 	else if(event.key == 'x' || event.key == 'X')

   112 	{

   113 		this.pathStroke.fillColor = '#535F6D';

   114 		this.path.fillColor = '#CCCCCC'

   115 	}

   116 	else if(event.key == 'w' || event.key == 'W')

   117 	{

   118 		this.pathStroke.fillColor = '#366F7A';

   119 		this.path.fillColor = '#02FEFF'

   120 	}

   121 };