001.
var
canvas;
002.
var
tshirts =
new
Array();
003.
var
a;
004.
var
b;
005.
var
line1;
006.
var
line2;
007.
var
line3;
008.
var
line4;
009.
var
PRICE = 100;
010.
$(document).ready(
function
() {
011.
012.
canvas =
new
fabric.Canvas(
'tcanvas'
, {
013.
hoverCursor:
'pointer'
,
014.
selection:
true
,
015.
selectionBorderColor:
'blue'
016.
});
017.
canvas.on({
018.
'object:moving'
:
function
(e) {
019.
e.target.opacity = 0.5;
020.
},
021.
'object:modified'
:
function
(e) {
022.
e.target.opacity = 1;
023.
},
024.
'object:selected'
:onObjectSelected,
025.
'selection:cleared'
:onSelectedCleared
026.
});
027.
028.
canvas.findTarget = (
function
(originalFn) {
029.
return
function
() {
030.
var
target = originalFn.apply(
this
, arguments);
031.
if
(target) {
032.
if
(
this
._hoveredTarget !== target) {
033.
canvas.fire(
'object:over'
, { target: target });
034.
if
(
this
._hoveredTarget) {
035.
canvas.fire(
'object:out'
, { target:
this
._hoveredTarget });
036.
}
037.
this
._hoveredTarget = target;
038.
}
039.
}
040.
else
if
(
this
._hoveredTarget) {
041.
canvas.fire(
'object:out'
, { target:
this
._hoveredTarget });
042.
this
._hoveredTarget =
null
;
043.
}
044.
return
target;
045.
};
046.
})(canvas.findTarget);
047.
048.
canvas.on(
'object:over'
,
function
(e) {
049.
050.
051.
});
052.
053.
canvas.on(
'object:out'
,
function
(e) {
054.
055.
056.
});
057.
058.
document.getElementById(
'add-text'
).onclick =
function
() {
059.
var
text = $(
"#text-string"
).val();
060.
var
textSample =
new
fabric.Text(text, {
061.
left: fabric.util.getRandomInt(0, 200),
062.
top: fabric.util.getRandomInt(0, 400),
063.
fontFamily:
'helvetica'
,
064.
angle: 0,
065.
fill:
'#000000'
,
066.
scaleX: 0.5,
067.
scaleY: 0.5,
068.
fontWeight:
''
,
069.
hasRotatingPoint:
true
070.
});
071.
canvas.add(textSample);
072.
canvas.item(canvas.item.length-1).hasRotatingPoint =
true
;
073.
$(
"#texteditor"
).css(
'display'
,
'block'
);
074.
$(
"#imageeditor"
).css(
'display'
,
'block'
);
075.
};
076.
$(
"#text-string"
).keyup(
function
(){
077.
var
activeObject = canvas.getActiveObject();
078.
if
(activeObject && activeObject.type ===
'text'
) {
079.
activeObject.text =
this
.value;
080.
canvas.renderAll();
081.
}
082.
});
083.
$(
".img-polaroid"
).click(
function
(e){
084.
var
el = e.target;
085.
086.
var
offset = 50;
087.
var
left = fabric.util.getRandomInt(0 + offset, 200 - offset);
088.
var
top = fabric.util.getRandomInt(0 + offset, 400 - offset);
089.
var
angle = fabric.util.getRandomInt(-20, 40);
090.
var
width = fabric.util.getRandomInt(30, 50);
091.
var
opacity = (
function
(min, max){
return
Math.random() * (max - min) + min; })(0.5, 1);
092.
093.
fabric.Image.fromURL(el.src,
function
(image) {
094.
image.set({
095.
left: left,
096.
top: top,
097.
angle: 0,
098.
padding: 10,
099.
cornersize: 10,
100.
hasRotatingPoint:
true
101.
});
102.
103.
canvas.add(image);
104.
window.PRICE += 50;
105.
alert(window.PRICE);
106.
});
107.
});
108.
document.getElementById(
'remove-selected'
).onclick =
function
() {
109.
var
activeObject = canvas.getActiveObject(),
110.
activeGroup = canvas.getActiveGroup();
111.
if
(activeObject) {
112.
if
(activeObject.get(
'type'
)==
'image'
){
113.
window.PRICE -= 50;
114.
alert(window.PRICE);
115.
}
116.
canvas.remove(activeObject);
117.
$(
"#text-string"
).val(
""
);
118.
}
119.
else
if
(activeGroup) {
120.
var
objectsInGroup = activeGroup.getObjects();
121.
canvas.discardActiveGroup();
122.
objectsInGroup.forEach(
function
(object) {
123.
if
(object.get(
'type'
)==
'image'
){
124.
window.PRICE -= 50;
125.
alert(window.PRICE);
126.
}
127.
canvas.remove(object);
128.
});
129.
}
130.
};
131.
document.getElementById(
'bring-to-front'
).onclick =
function
() {
132.
var
activeObject = canvas.getActiveObject(),
133.
activeGroup = canvas.getActiveGroup();
134.
if
(activeObject) {
135.
activeObject.bringToFront();
136.
}
137.
else
if
(activeGroup) {
138.
var
objectsInGroup = activeGroup.getObjects();
139.
canvas.discardActiveGroup();
140.
objectsInGroup.forEach(
function
(object) {
141.
object.bringToFront();
142.
});
143.
}
144.
};
145.
document.getElementById(
'send-to-back'
).onclick =
function
() {
146.
var
activeObject = canvas.getActiveObject(),
147.
activeGroup = canvas.getActiveGroup();
148.
if
(activeObject) {
149.
activeObject.sendToBack();
150.
}
151.
else
if
(activeGroup) {
152.
var
objectsInGroup = activeGroup.getObjects();
153.
canvas.discardActiveGroup();
154.
objectsInGroup.forEach(
function
(object) {
155.
object.sendToBack();
156.
});
157.
}
158.
};
159.
$(
"#text-bold"
).click(
function
() {
160.
var
activeObject = canvas.getActiveObject();
161.
if
(activeObject && activeObject.type ===
'text'
) {
162.
activeObject.fontWeight = (activeObject.fontWeight ==
'bold'
?
''
:
'bold'
);
163.
canvas.renderAll();
164.
}
165.
});
166.
$(
"#text-italic"
).click(
function
() {
167.
var
activeObject = canvas.getActiveObject();
168.
if
(activeObject && activeObject.type ===
'text'
) {
169.
activeObject.fontStyle = (activeObject.fontStyle ==
'italic'
?
''
:
'italic'
);
170.
canvas.renderAll();
171.
}
172.
});
173.
$(
"#text-strike"
).click(
function
() {
174.
var
activeObject = canvas.getActiveObject();
175.
if
(activeObject && activeObject.type ===
'text'
) {
176.
activeObject.textDecoration = (activeObject.textDecoration ==
'line-through'
?
''
:
'line-through'
);
177.
canvas.renderAll();
178.
}
179.
});
180.
$(
"#text-underline"
).click(
function
() {
181.
var
activeObject = canvas.getActiveObject();
182.
if
(activeObject && activeObject.type ===
'text'
) {
183.
activeObject.textDecoration = (activeObject.textDecoration ==
'underline'
?
''
:
'underline'
);
184.
canvas.renderAll();
185.
}
186.
});
187.
$(
"#text-left"
).click(
function
() {
188.
var
activeObject = canvas.getActiveObject();
189.
if
(activeObject && activeObject.type ===
'text'
) {
190.
activeObject.textAlign =
'left'
;
191.
canvas.renderAll();
192.
}
193.
});
194.
$(
"#text-center"
).click(
function
() {
195.
var
activeObject = canvas.getActiveObject();
196.
if
(activeObject && activeObject.type ===
'text'
) {
197.
activeObject.textAlign =
'center'
;
198.
canvas.renderAll();
199.
}
200.
});
201.
$(
"#text-right"
).click(
function
() {
202.
var
activeObject = canvas.getActiveObject();
203.
if
(activeObject && activeObject.type ===
'text'
) {
204.
activeObject.textAlign =
'right'
;
205.
canvas.renderAll();
206.
}
207.
});
208.
$(
"#font-family"
).change(
function
() {
209.
var
activeObject = canvas.getActiveObject();
210.
if
(activeObject && activeObject.type ===
'text'
) {
211.
activeObject.fontFamily =
this
.value;
212.
canvas.renderAll();
213.
}
214.
});
215.
$(
'#text-bgcolor'
).miniColors({
216.
change:
function
(hex, rgb) {
217.
var
activeObject = canvas.getActiveObject();
218.
if
(activeObject && activeObject.type ===
'text'
) {
219.
activeObject.backgroundColor =
this
.value;
220.
canvas.renderAll();
221.
}
222.
},
223.
open:
function
(hex, rgb) {
224.
225.
},
226.
close:
function
(hex, rgb) {
227.
228.
}
229.
});
230.
$(
'#text-fontcolor'
).miniColors({
231.
change:
function
(hex, rgb) {
232.
var
activeObject = canvas.getActiveObject();
233.
if
(activeObject && activeObject.type ===
'text'
) {
234.
activeObject.fill =
this
.value;
235.
canvas.renderAll();
236.
}
237.
},
238.
open:
function
(hex, rgb) {
239.
240.
},
241.
close:
function
(hex, rgb) {
242.
243.
}
244.
});
245.
246.
$(
'#text-strokecolor'
).miniColors({
247.
change:
function
(hex, rgb) {
248.
var
activeObject = canvas.getActiveObject();
249.
if
(activeObject && activeObject.type ===
'text'
) {
250.
activeObject.strokeStyle =
this
.value;
251.
canvas.renderAll();
252.
}
253.
},
254.
open:
function
(hex, rgb) {
255.
256.
},
257.
close:
function
(hex, rgb) {
258.
259.
}
260.
});
261.
262.
263.
$(
"#drawingArea"
).hover(
264.
function
() {
265.
canvas.add(line1);
266.
canvas.add(line2);
267.
canvas.add(line3);
268.
canvas.add(line4);
269.
canvas.renderAll();
270.
},
271.
function
() {
272.
canvas.remove(line1);
273.
canvas.remove(line2);
274.
canvas.remove(line3);
275.
canvas.remove(line4);
276.
canvas.renderAll();
277.
}
278.
);
279.
280.
$(
'.color-preview'
).click(
function
(){
281.
var
color = $(
this
).css(
"background-color"
);
282.
document.getElementById(
"shirtDiv"
).style.backgroundColor = color;
283.
});
284.
285.
$(
'#flip'
).click(
286.
function
() {
287.
if
($(
this
).attr(
"data-original-title"
) ==
"Show Back View"
) {
288.
$(
this
).attr(
'data-original-title'
,
'Show Front View'
);
289.
$(
"#tshirtFacing"
).attr(
"src"
,
"img/crew_back.png"
);
290.
a = JSON.stringify(canvas);
291.
canvas.clear();
292.
try
293.
{
294.
var
json = JSON.parse(b);
295.
canvas.loadFromJSON(b);
296.
}
297.
catch
(e)
298.
{}
299.
300.
}
else
{
301.
$(
this
).attr(
'data-original-title'
,
'Show Back View'
);
302.
$(
"#tshirtFacing"
).attr(
"src"
,
"img/crew_front.png"
);
303.
b = JSON.stringify(canvas);
304.
canvas.clear();
305.
try
306.
{
307.
var
json = JSON.parse(a);
308.
canvas.loadFromJSON(a);
309.
}
310.
catch
(e)
311.
{}
312.
}
313.
canvas.renderAll();
314.
setTimeout(
function
() {
315.
canvas.calcOffset();
316.
},200);
317.
});
318.
$(
".clearfix button,a"
).tooltip();
319.
line1 =
new
fabric.Line([0,0,200,0], {
"stroke"
:
"#000000"
,
"strokeWidth"
:1,hasBorders:
false
,hasControls:
false
,hasRotatingPoint:
false
,selectable:
false
});
320.
line2 =
new
fabric.Line([199,0,200,399], {
"stroke"
:
"#000000"
,
"strokeWidth"
:1,hasBorders:
false
,hasControls:
false
,hasRotatingPoint:
false
,selectable:
false
});
321.
line3 =
new
fabric.Line([0,0,0,400], {
"stroke"
:
"#000000"
,
"strokeWidth"
:1,hasBorders:
false
,hasControls:
false
,hasRotatingPoint:
false
,selectable:
false
});
322.
line4 =
new
fabric.Line([0,400,200,399], {
"stroke"
:
"#000000"
,
"strokeWidth"
:1,hasBorders:
false
,hasControls:
false
,hasRotatingPoint:
false
,selectable:
false
});
323.
});
324.
325.
326.
function
getRandomNum(min, max) {
327.
return
Math.random() * (max - min) + min;
328.
}
329.
330.
function
onObjectSelected(e) {
331.
var
selectedObject = e.target;
332.
$(
"#text-string"
).val(
""
);
333.
selectedObject.hasRotatingPoint =
true
334.
if
(selectedObject && selectedObject.type ===
'text'
) {
335.
336.
$(
"#texteditor"
).css(
'display'
,
'block'
);
337.
$(
"#text-string"
).val(selectedObject.getText());
338.
$(
'#text-fontcolor'
).miniColors(
'value'
,selectedObject.fill);
339.
$(
'#text-strokecolor'
).miniColors(
'value'
,selectedObject.strokeStyle);
340.
$(
"#imageeditor"
).css(
'display'
,
'block'
);
341.
}
342.
else
if
(selectedObject && selectedObject.type ===
'image'
){
343.
344.
$(
"#texteditor"
).css(
'display'
,
'none'
);
345.
$(
"#imageeditor"
).css(
'display'
,
'block'
);
346.
}
347.
}
348.
function
onSelectedCleared(e){
349.
$(
"#texteditor"
).css(
'display'
,
'none'
);
350.
$(
"#text-string"
).val(
""
);
351.
$(
"#imageeditor"
).css(
'display'
,
'none'
);
352.
}
353.
function
setFont(font){
354.
var
activeObject = canvas.getActiveObject();
355.
if
(activeObject && activeObject.type ===
'text'
) {
356.
activeObject.fontFamily = font;
357.
canvas.renderAll();
358.
}
359.
}
360.
function
removeWhite(){
361.
var
activeObject = canvas.getActiveObject();
362.
if
(activeObject && activeObject.type ===
'image'
) {
363.
activeObject.filters[2] =
new
fabric.Image.filters.RemoveWhite({hreshold: 100, distance: 10});
364.
activeObject.applyFilters(canvas.renderAll.bind(canvas));
365.
}
366.
}