56 { |
59 { |
57 $('.canvas').remove(); |
60 $('.canvas').remove(); |
58 }); |
61 }); |
59 }; |
62 }; |
60 |
63 |
61 searchCanvas.prototype.onMouseDown = function(event) |
64 searchCanvas.prototype.onPointerIn = function(mainPointerX, mainPointerY, secondPointerX, secondPointerY) |
62 { |
65 { |
63 this.pathStroke = new paper.Path(); |
66 this.mainPathStroke = new paper.Path(); |
64 this.path = new paper.Path(); |
67 this.mainPath = new paper.Path(); |
|
68 this.secondPathStroke = new paper.Path(); |
|
69 this.secondPath = new paper.Path(); |
65 |
70 |
66 this.pathStroke.fillColor = '#366F7A'; |
71 this.mainPathStroke.fillColor = '#366F7A'; |
67 this.path.fillColor = '#02FEFF'; |
72 this.mainPath.fillColor = '#02FEFF'; |
|
73 this.secondPathStroke.fillColor = '#366F7A'; |
|
74 this.secondPath.fillColor = '#02FEFF'; |
68 |
75 |
69 this.pathStroke.add(event.point); |
76 // var pointerX = e.point.x, pointerY = e.point.y; |
|
77 |
|
78 console.log('IN'); |
|
79 |
|
80 var mainPoint = new paper.Point(mainPointerX, mainPointerY); |
|
81 var secondPoint = new paper.Point(secondPointerX, secondPointerY); |
|
82 |
|
83 if(!this.mainLastPoint) |
|
84 { |
|
85 this.mainLastPoint = mainPoint; |
|
86 } |
|
87 if(!this.secondLastPoint) |
|
88 { |
|
89 this.secondLastPoint = secondPoint; |
|
90 } |
70 }; |
91 }; |
71 |
92 |
72 searchCanvas.prototype.onMouseDrag = function(event) |
93 searchCanvas.prototype.onPointerMove = function(mainPointerX, mainPointerY, secondPointerX, secondPointerY) |
73 { |
94 { |
74 var step = event.delta.divide(new paper.Point(4, 4)); |
95 // var pointerX = e.point.x, pointerY = e.point.y; |
75 var stepStroke = event.delta.divide(new paper.Point(2, 2)); |
96 |
76 step.angle += 90; |
97 var mainPoint = new paper.Point(mainPointerX, mainPointerY); |
77 stepStroke.angle += 90; |
98 var secondPoint = new paper.Point(secondPointerX, secondPointerY); |
|
99 // var delta = new paper.Point(point.x - this.lastPoint.x, point.y - this.lastPoint.y); |
|
100 var mainDelta = new paper.Point(15, 15); |
|
101 var secondDelta = new paper.Point(15, 15); |
|
102 |
|
103 this.mainLastPoint = mainPoint; |
|
104 this.secondLastPoint = secondPoint; |
|
105 |
|
106 var mainStep = mainDelta.divide(new paper.Point(4, 4)); |
|
107 var secondStep = secondDelta.divide(new paper.Point(4, 4)); |
|
108 |
|
109 var mainStepStroke = mainDelta.divide(new paper.Point(2, 2)); |
|
110 mainStep.angle += 90; |
|
111 mainStepStroke.angle += 90; |
|
112 var secondStepStroke = secondDelta.divide(new paper.Point(2, 2)); |
|
113 secondStep.angle += 90; |
|
114 secondStepStroke.angle += 90; |
78 |
115 |
79 var top = event.middlePoint.add(step); |
116 var mainTop = mainPoint.add(mainStep); |
80 var bottom = event.middlePoint.add(step.negate()); |
117 var mainBottom = mainPoint.add(mainStep.negate()); |
|
118 var secondTop = secondPoint.add(secondStep); |
|
119 var secondBottom = secondPoint.add(secondStep.negate()); |
81 |
120 |
82 var topStroke = event.middlePoint.add(stepStroke); |
121 var mainTopStroke = mainPoint.add(mainStepStroke); |
83 var bottomStroke = event.middlePoint.add(stepStroke.negate()); |
122 var mainBottomStroke = mainPoint.add(mainStepStroke.negate()); |
|
123 var secondTopStroke = secondPoint.add(secondStepStroke); |
|
124 var secondBottomStroke = secondPoint.add(secondStepStroke.negate()); |
84 |
125 |
85 this.path.add(top); |
126 this.mainPath.add(mainTop); |
86 this.path.insert(0, bottom); |
127 this.mainPath.insert(0, mainBottom); |
87 this.path.smooth(); |
128 this.mainPath.smooth(); |
|
129 |
|
130 this.secondPath.add(secondTop); |
|
131 this.secondPath.insert(0, secondBottom); |
|
132 this.secondPath.smooth(); |
88 |
133 |
89 this.pathStroke.add(topStroke); |
134 this.mainPathStroke.add(mainTopStroke); |
90 this.pathStroke.insert(0, bottomStroke); |
135 this.mainPathStroke.insert(0, mainBottomStroke); |
91 this.pathStroke.smooth(); |
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(); |
92 }; |
143 }; |
93 |
144 |
94 searchCanvas.prototype.onMouseUp = function(event) |
145 searchCanvas.prototype.onPointerOut = function() |
95 { |
146 { |
96 this.pathStroke.remove(); |
147 this.mainPathStroke.remove(); |
97 this.path.remove(); |
148 this.mainPath.remove(); |
|
149 this.mainLastPoint = null; |
|
150 |
|
151 this.secondPathStroke.remove(); |
|
152 this.secondPath.remove(); |
|
153 this.secondLastPoint = null; |
98 }; |
154 }; |
99 |
155 |
100 searchCanvas.prototype.onKeyDown = function(event) |
156 searchCanvas.prototype.onKeyDown = function(event) |
101 { |
157 { |
102 //S'il n'y a rien a colorier, on quitte. |
158 //S'il n'y a rien a colorier, on quitte. |