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