1 $(function() { |
|
2 |
|
3 var startPath = $(".fragment-path").val(); |
|
4 |
|
5 var PATHCOLOR = "#ff00ff", |
|
6 SELECTEDCOLOR = "#ffff00", |
|
7 HANDLESIZE = 6; |
|
8 |
|
9 var jqs = $(".cutout-canvas"), |
|
10 offset = jqs.offset(), |
|
11 paper = new Raphael(jqs[0]), |
|
12 closed = false, |
|
13 rectangleMode = false, |
|
14 closeTimeout, |
|
15 points = []; |
|
16 |
|
17 paper.rect(0, 0, paper.width, paper.height) |
|
18 .attr({ |
|
19 stroke: "none", |
|
20 fill: "#fff", |
|
21 "fill-opacity": .01 |
|
22 }) |
|
23 .click(clickAddPoint) |
|
24 .drag( |
|
25 function(dx, dy, mx, my) { |
|
26 |
|
27 if (dx*dx+dy*dy < 4) { |
|
28 return; |
|
29 } |
|
30 |
|
31 if (!pathDragging) { |
|
32 clearTimeout(closeTimeout); |
|
33 closed = true; |
|
34 resetPoints(); |
|
35 for (var i = 0; i < 4; i++) { |
|
36 addPoint(mx - offset.left, my - offset.top) |
|
37 } |
|
38 redrawPath(); |
|
39 pathDragging = true; |
|
40 rectangleMode = true; |
|
41 } |
|
42 |
|
43 var x = mx - offset.left, |
|
44 y = my - offset.top; |
|
45 points[1].x = points[2].x = x; |
|
46 points[2].y = points[3].y = y; |
|
47 redrawPath(); |
|
48 }, |
|
49 function(mx, my) { |
|
50 pathDragging = false; |
|
51 }, |
|
52 function() { |
|
53 setTimeout(function() { |
|
54 pointDragging = false; |
|
55 },0); |
|
56 } |
|
57 ); |
|
58 |
|
59 function resetPoints() { |
|
60 rectangleMode = false; |
|
61 points.forEach(function(p) { |
|
62 p.handle.remove(); |
|
63 }); |
|
64 points = []; |
|
65 } |
|
66 |
|
67 function addPoint(x, y) { |
|
68 |
|
69 var dragdeltax, dragdeltay, pointDragging, |
|
70 point = { |
|
71 x: Math.floor(x), |
|
72 y: Math.floor(y) |
|
73 } |
|
74 |
|
75 var pointsWithSameX = [], pointsWithSameY = []; |
|
76 |
|
77 var pointrect = paper.rect(0, 0, HANDLESIZE, HANDLESIZE) |
|
78 .attr({ |
|
79 stroke: PATHCOLOR, |
|
80 fill: PATHCOLOR, |
|
81 "fill-opacity": .3 |
|
82 }) |
|
83 .hover(shapeMouseOver, shapeMouseOut) |
|
84 .drag( |
|
85 function(dx, dy) { |
|
86 pointDragging = true; |
|
87 point.x = dx + dragdeltax; |
|
88 point.y = dy + dragdeltay; |
|
89 if (rectangleMode) { |
|
90 pointsWithSameX.forEach(function(p) { |
|
91 p.x = point.x; |
|
92 }); |
|
93 pointsWithSameY.forEach(function(p) { |
|
94 p.y = point.y; |
|
95 }); |
|
96 } |
|
97 redrawPath(); |
|
98 }, |
|
99 function() { |
|
100 dragdeltax = point.x; |
|
101 dragdeltay = point.y; |
|
102 if (rectangleMode) { |
|
103 pointsWithSameX = points.filter(function(p) { |
|
104 return p !== point && p.x === point.x; |
|
105 }); |
|
106 pointsWithSameY = points.filter(function(p) { |
|
107 return p !== point && p.y === point.y; |
|
108 }); |
|
109 } |
|
110 }, |
|
111 function() { |
|
112 setTimeout(function() { |
|
113 pointDragging = false; |
|
114 shapeMouseOut(pointrect); |
|
115 },0); |
|
116 } |
|
117 ) |
|
118 .click(function() { |
|
119 if (pointDragging) { |
|
120 return; |
|
121 } |
|
122 this.remove(); |
|
123 points = points.filter(function(p) { |
|
124 return p != point; |
|
125 }); |
|
126 redrawPath(); |
|
127 }); |
|
128 |
|
129 point.handle = pointrect; |
|
130 |
|
131 points.push(point); |
|
132 |
|
133 } |
|
134 |
|
135 function clickAddPoint(e, mx, my) { |
|
136 |
|
137 if (pathDragging) { |
|
138 return; |
|
139 } |
|
140 |
|
141 if (rectangleMode) { |
|
142 resetPoints(); |
|
143 } |
|
144 |
|
145 clearTimeout(closeTimeout); |
|
146 closed = false; |
|
147 |
|
148 addPoint(mx - offset.left, my - offset.top); |
|
149 |
|
150 redrawPath(); |
|
151 |
|
152 closeTimeout = setTimeout(function() { |
|
153 closed = true; |
|
154 redrawPath(); |
|
155 }, 1000) |
|
156 |
|
157 } |
|
158 |
|
159 function shapeMouseOver() { |
|
160 points.forEach(function(point) { |
|
161 if (point.handle !== this) { |
|
162 point.handle.attr({ |
|
163 stroke: PATHCOLOR, |
|
164 fill: PATHCOLOR |
|
165 }); |
|
166 } |
|
167 }); |
|
168 if (this !== path) { |
|
169 path.attr({ |
|
170 stroke: PATHCOLOR, |
|
171 fill: PATHCOLOR |
|
172 }); |
|
173 } |
|
174 this.attr({ |
|
175 stroke: SELECTEDCOLOR, |
|
176 fill: SELECTEDCOLOR |
|
177 }); |
|
178 } |
|
179 |
|
180 function shapeMouseOut() { |
|
181 if (pathDragging || !this || !this.attr) { |
|
182 return; |
|
183 } |
|
184 this.attr({ |
|
185 stroke: PATHCOLOR, |
|
186 fill: PATHCOLOR |
|
187 }); |
|
188 } |
|
189 |
|
190 function redrawPath() { |
|
191 var d = "M" |
|
192 + points.map(function(p) { return p.x + " " + p.y }).join("L") |
|
193 + (closed ? "Z" : ""); |
|
194 path.attr({ |
|
195 path: d |
|
196 }); |
|
197 points.forEach(function(point) { |
|
198 point.handle.attr({ |
|
199 x: point.x - HANDLESIZE / 2, |
|
200 y: point.y - HANDLESIZE / 2 |
|
201 }); |
|
202 }); |
|
203 var transd = "M" |
|
204 + points.map(function(p) { return (p.x / paper.width).toString().replace(/(\.\d{4})\d*/,"$1") + " " + (p.y / paper.height).toString().replace(/(\.\d{4})\d*/,"$1") }).join("L") |
|
205 + "Z"; |
|
206 $(".fragment-path").val(transd).change(); |
|
207 } |
|
208 |
|
209 var dragdeltax, dragdeltay, pathDragging; |
|
210 |
|
211 var path = paper.path() |
|
212 .attr({ |
|
213 stroke: PATHCOLOR, |
|
214 fill: PATHCOLOR, |
|
215 "fill-opacity": .1 |
|
216 }) |
|
217 .click(clickAddPoint) |
|
218 .hover(shapeMouseOver, shapeMouseOut) |
|
219 .drag( |
|
220 function(dx, dy) { |
|
221 pathDragging = true; |
|
222 points.forEach(function(point) { |
|
223 point.x += dx - dragdeltax; |
|
224 point.y += dy - dragdeltay; |
|
225 }); |
|
226 dragdeltax = dx; |
|
227 dragdeltay = dy; |
|
228 redrawPath(); |
|
229 }, |
|
230 function() { |
|
231 dragdeltax = 0; |
|
232 dragdeltay = 0; |
|
233 }, |
|
234 function() { |
|
235 setTimeout(function() { |
|
236 pathDragging = false; |
|
237 shapeMouseOut(path); |
|
238 },0); |
|
239 } |
|
240 ); |
|
241 |
|
242 $(".clear-fragment").click(function() { |
|
243 resetPoints(); |
|
244 redrawPath(); |
|
245 return false; |
|
246 }); |
|
247 |
|
248 function revertPath() { |
|
249 startPath.split(/\s*[A-Z]\s*/).forEach(function(coords) { |
|
250 xy = coords.split(/[\s,]/); |
|
251 if (xy.length === 2) { |
|
252 addPoint(paper.width * parseFloat(xy[0]), paper.height * parseFloat(xy[1])); |
|
253 } |
|
254 }); |
|
255 |
|
256 if (points.length) { |
|
257 closed = true; |
|
258 } |
|
259 |
|
260 if ( |
|
261 points.length === 4 |
|
262 && points[0].x === points[3].x |
|
263 && points[0].y === points[1].y |
|
264 && points[1].x === points[2].x |
|
265 && points[2].y === points[3].y |
|
266 ) { |
|
267 rectangleMode = true; |
|
268 } |
|
269 |
|
270 redrawPath(); |
|
271 } |
|
272 |
|
273 revertPath(); |
|
274 |
|
275 $(".reset-fragment").click(function() { |
|
276 resetPoints(); |
|
277 revertPath(); |
|
278 return false; |
|
279 }) |
|
280 |
|
281 }); |
|