// JavaScript Document var canvas = new fabric.Canvas('shirtcanvas'); var canvast = new fabric.Canvas('trousercanvas'); var cans = $('#shirtcanvas').parent('.canvas-container'); var cant = $('#trousercanvas').parent('.canvas-container'); cant.css('display','none'); document.getElementById('backlogosb').style.display="none"; $('#showFront').click(function() { cans.css('display','block'); cant.css('display','none'); canvas.calcOffset(); canvast.calcOffset(); $('#showFront').addClass('active'); $('#showBack').removeClass('active'); //updateControls(); document.getElementById('frontlogosb').style.display="block"; document.getElementById('backlogosb').style.display="none"; }); $('#showBack').click(function() { cans.css('display','none'); cant.css('display','block'); canvas.calcOffset(); canvast.calcOffset(); $('#showFront').removeClass('active'); $('#showBack').addClass('active'); //updateControls(); document.getElementById('frontlogosb').style.display="none"; document.getElementById('backlogosb').style.display="block"; }); $('html').keyup(function(e){ if(e.which == 46) { if(cans.css('display')=="block") { var obd = canvas.getActiveObject(); canvas.remove(obd); } else if(cant.css('display')=="block") { var obd = canvast.getActiveObject(); canvast.remove(obd); } } }); function loadBaseShirts() { color1 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-51.15 10.61l47.96 0 0 580.66 -544.3 0 0 -3.35 -47.18 0 0 -581.04 543.52 0 0 3.73zm-498.85 580.22l-50 0 0 9.17 50 0 0 -9.17z');color2 = new fabric.Path('M231.43 42.36c7.93,4.04 21.35,12.08 33.06,18.1 10.28,5.29 16.81,12.18 28.95,18.87 11.44,-6.33 18.56,-13.22 30.27,-19.72 14.21,-7.87 20.67,-11.58 32.4,-17.74 2.34,3.67 5,7.62 7.96,11.84 2.81,4.33 6.51,8.61 11.2,12.83 6.56,6.11 14.79,11.37 25.42,15.4 8.94,3.69 17.86,7.36 27.38,11.36l-0.33 -0.14 -0.01 0.01c-7.75,1.73 -12.96,6.24 -19.45,9.7 -6.73,3.78 -11.83,7.53 -13.88,11.7 -2.63,5.35 -1.66,10.08 1.79,13.9l0.17 -1.64c1.03,-1.28 2.17,-2.51 3.45,-3.69l0 -0.07c-0.13,-2.53 -0.86,-4.83 -0.4,-7.6 0.43,-2.59 3.8,-3.81 9.99,-5.73 5.98,-1.85 9.83,-5.33 15.01,-7.42 2.09,-0.84 13.35,-0.81 15.75,-0.36 1.17,0.22 1.65,1.16 1.56,3l0.03 0.08c1.56,-0.49 3.35,-1.6 5.12,-3.31 1.63,-1.57 3.24,-2.77 4.89,-3.61 0.39,-0.04 0.78,-0.12 1.17,-0.23l0.72 -0.65 22.46 -19.85 -8.07 -41.93 -28.78 -27.48 -50.78 -3.64 -31.76 6.46 7.91 5.19 -8.71 -5.71 -30.9 1.17 -1.36 3.87 0.27 0.71c6.32,-1.85 12.73,-1.73 19.3,-0.67 2.82,0.46 -2.08,4.46 -2.27,5.55 -0.69,0.1 -1.39,0.53 -2.11,1.33 -6.26,2.75 -11.96,7.05 -18.44,10.64 -10.56,5.87 -19.53,10.08 -26.83,12.35 -6.78,-2.22 -15.39,-6.13 -26.03,-11.89l-19.88 -11.53 -1.14 -0.89c-1.58,-1.69 -2.79,-3.33 -3.46,-4.89 0.01,-1.8 8.02,-1.23 9.54,-1.27 3.45,-0.08 6.87,0.69 10.27,1.72 0.67,-0.59 0.28,-1.57 -0.04,-1.8l-7.05 -5.11 -24.88 3.87 -0.05 -2.08 -71.64 -4.63 -26.95 17.32 -18.36 36.33 8.21 36.07 12.91 1.28 0.45 0.07c0.76,0.47 1.67,0.88 2.71,1.33 1.07,0.46 1.98,1.7 2.96,2.57 1.93,1.72 3.79,2.83 5.63,3.52l0 -0.01c-0.37,-1.2 -0.75,-2.89 0.28,-3.04l0.11 -0.02 0 -0.03 0.02 0.03c3.54,-0.49 7.15,-0.68 12.08,-0.47 3.85,0.17 7.43,2.01 12.01,4.4 3.61,1.88 7.52,3.43 11.72,5.01 3.62,1.36 5.89,3.3 5.53,6.41l-0.64 5.72 0.27 0 3.59 3.85 -0.11 1.32c3.84,-3.14 4.75,-8.41 1.27,-14.94 -2.14,-4.02 -7.39,-7.01 -12.82,-10.19 -7.93,-4.94 -14.62,-8.44 -19.5,-9.83l-0.3 -0.17c0.11,-0.02 0.21,-0.05 0.3,-0.09 7.77,-3.23 15.4,-6.28 23.31,-9.48 6.84,-2.77 13.94,-6.02 20.85,-10.47 4.37,-2.76 8.23,-6.26 11.82,-10.32 4.56,-5.18 9.61,-12.04 14.86,-20.54zm7.88 232.23l-47.28 318.77 -48.93 -7.26 47.41 -319.67 48.77 7.23c-0.65,-21.79 0.39,-43.35 0.56,-65.04 19.87,-15.13 39.64,-21.66 59.31,-20.16 15.57,0.39 31.84,7.76 48.61,20.23 0.1,21.67 0.56,43.1 0.31,65l48.93 -7.26 47.42 319.67 -48.94 7.26 -47.41 -319.67c-4.72,0.75 -10.01,1.42 -15.87,2.01 -0.72,0.27 -1.93,0.22 -2.15,0.81 -24.15,0.57 -48.03,1.42 -72.44,1.69 -0.11,-0.28 0.07,-0.76 -0.35,-0.84 -6,-1.24 -11.99,-1.68 -17.94,-2.56l-0.01 -0.21zm37.08 -223.14c11.76,-2.01 23.33,-1.96 34.74,-0.25l-3 9.8 -14.37 10.14c-4.74,-3.25 -9.53,-6.69 -14.24,-9.76 -0.73,-3.44 -1.77,-6.75 -3.13,-9.93z');color3 = new fabric.Path('M162.4 83.99c6.18,-2.54 12.38,-5.02 18.57,-7.53 6.8,-2.75 13.39,-5.86 19.58,-9.82 3.82,-2.44 7.17,-5.5 10.17,-8.9 0.93,-1.06 1.84,-2.14 2.73,-3.24l5.93 5.07c-0.96,1.17 -1.89,2.28 -2.81,3.33 -3.59,4.06 -7.45,7.56 -11.82,10.32 -6.91,4.45 -14.01,7.7 -20.85,10.47 -7.13,2.89 -14.04,5.65 -21.03,8.54l0 0 -0.47 -8.24zm66.37 188.11l-47.42 319.68 -12.23 -1.81 47.42 -319.68 12.23 1.81zm129.97 0l47.42 319.68 12.23 -1.81 -47.41 -319.68 -12.24 1.81zm-119.64 -19.72l109.02 0c-0.01,-2.62 -0.03,-5.23 -0.05,-7.85l-108.88 0c-0.04,2.62 -0.07,5.23 -0.09,7.85zm0.55 -30.47l108.21 0 -0.07 -7.84 -108.01 0c-0.03,2.61 -0.08,5.23 -0.13,7.84zm188.06 -128.75c-0.74,-0.31 -24.08,-10.01 -27.02,-11.22 -10.63,-4.03 -18.86,-9.29 -25.42,-15.4 -2.62,-2.36 -4.93,-4.73 -6.95,-7.13l5.94 -5.08c1.95,2.3 4.09,4.45 6.28,6.47 6.71,6.16 14.41,10.62 22.92,13.84l0.21 0.09c4.46,1.84 8.92,3.67 13.38,5.51 3.15,1.3 6.3,2.6 9.44,3.92l1.98 0.82 -0.73 8.18 -0.03 0z');color4 = new fabric.Path('M143.77 106.76l3.06 -1.4c-0.39,-1.2 -0.85,-3.04 0.23,-3.19 3.58,-0.51 7.22,-0.71 12.21,-0.49 3.85,0.17 7.43,2.01 12.01,4.4 3.61,1.88 7.52,3.43 11.72,5.01 3.62,1.36 5.89,3.3 5.53,6.41l-0.65 5.73 0.92 11.34 2.34 11.64 0.46 13.94 -2.83 16.54 -47.4 -1.76 -1.69 -21.55 4.09 -46.62zm181.25 -95.31l-69.23 -1.88 7.05 5.11c0.32,0.23 0.71,1.21 0.04,1.8 -3.4,-1.03 -6.82,-1.8 -10.27,-1.72 -1.52,0.04 -9.53,-0.53 -9.54,1.27 0.67,1.56 1.88,3.2 3.46,4.89l1.14 0.89 19.88 11.53c10.64,5.76 19.25,9.67 26.03,11.89 7.3,-2.27 16.27,-6.48 26.83,-12.35 6.48,-3.59 12.18,-7.89 18.44,-10.64 0.72,-0.8 1.42,-1.23 2.11,-1.33 0.19,-1.09 5.09,-5.09 2.27,-5.55 -6.57,-1.06 -12.98,-1.18 -19.3,0.67l-0.27 -0.71 1.36 -3.87zm74.6 123.12l0.19 -11.5c-0.13,-2.53 -0.86,-4.83 -0.4,-7.6 0.43,-2.59 3.8,-3.81 9.99,-5.73 5.98,-1.85 9.83,-5.33 15.01,-7.42 2.09,-0.84 13.35,-0.81 15.75,-0.36 1.17,0.22 1.65,1.16 1.56,3l11.72 45.05 -5.33 20.97c0,0 -21.49,8.72 -22.53,8.98 -1.04,0.26 -26.82,-3.77 -26.82,-3.77l-2.09 -23.31 2.95 -18.31z');logo1 = new fabric.Path('M0.91 1.09c0,0.01 -0.01,0.01 -0.01,0.01 0,0 0,0.01 -0.01,0.01l-0.03 0.03c-0.01,0 -0.02,0.01 -0.02,0.01l-0.1 0.1c0,0 0,0 -0.01,0 -0.01,0.02 -0.03,0.03 -0.04,0.04l-0.03 0.03c-0.01,0.01 -0.02,0.01 -0.02,0.02 -0.01,-0.01 -0.06,-0.07 -0.07,-0.08 -0.03,-0.03 -0.07,-0.08 -0.1,-0.11 -0.01,-0.01 -0.01,-0.02 -0.02,-0.02 0,-0.01 -0.01,-0.01 -0.01,-0.02 -0.03,-0.03 -0.05,-0.05 -0.07,-0.08 -0.03,-0.02 -0.08,-0.09 -0.11,-0.11 -0.07,-0.05 -0.14,-0.05 -0.22,-0.02 -0.01,0.01 -0.03,0.03 -0.04,0.03 0,0.01 0.05,0.07 0.06,0.07l0.07 0.08c0,0 0,0 0.01,0.01 0,0 0.01,0.01 0.01,0.01 0.01,0.01 0.02,0.02 0.02,0.03l0.04 0.04c0.05,0.05 0.1,0.1 0.14,0.16 0,0 0.01,0 0.01,0.01l0.09 0.1c0.01,0.01 0.02,0.02 0.02,0.03 0.01,0.01 0.02,0.01 0.03,0.02 0.04,0.03 0.09,0.06 0.16,0.05 0.05,0 0.09,-0.03 0.13,-0.06 0.02,-0.02 0.04,-0.04 0.07,-0.06l0.07 -0.07c0.02,-0.02 0.13,-0.11 0.13,-0.12 0.01,0 0.01,-0.01 0.02,-0.01 0.06,-0.1 0.05,-0.19 -0.02,-0.27l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,0 -0.01,-0.01 -0.01,-0.01l-0.09 -0.1c-0.02,-0.02 -0.03,-0.04 -0.05,-0.06 -0.02,-0.02 -0.03,-0.04 -0.05,-0.05 -0.01,-0.02 -0.1,-0.11 -0.1,-0.12 -0.02,0.01 -0.05,0.07 -0.06,0.09 -0.02,0.06 -0.01,0.12 0.02,0.17 0.01,0.03 0.04,0.06 0.06,0.08 0.04,0.04 0.07,0.08 0.1,0.12l0.19 0.2c0.01,0.01 0.02,0.02 0.02,0.02zm-0.35 0.04c0,-0.01 0.01,-0.01 0.02,-0.02 0.04,-0.06 0.06,-0.12 0.04,-0.19 -0.02,-0.07 -0.05,-0.09 -0.09,-0.13l-0.03 -0.04c-0.01,0 -0.01,-0.01 -0.02,-0.02 -0.03,-0.02 -0.06,-0.06 -0.09,-0.09l-0.1 -0.11c-0.01,-0.01 -0.07,-0.07 -0.07,-0.08 0.01,0 0.01,-0.01 0.02,-0.01 0,-0.01 0,-0.01 0.01,-0.01l0.04 -0.04c0.01,-0.01 0.02,-0.02 0.03,-0.03 0.01,0 0.01,-0.01 0.02,-0.01l0.12 -0.11c0,-0.01 0.02,-0.03 0.03,-0.03l0.08 0.09c0.03,0.03 0.05,0.05 0.07,0.08l0.16 0.17c0.04,0.04 0.06,0.07 0.11,0.09 0.07,0.03 0.12,0.02 0.18,-0.01 0.01,0 0.03,-0.02 0.04,-0.03 0,0 -0.02,-0.02 -0.02,-0.02l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03l-0.05 -0.05c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,-0.01 -0.01,-0.02 -0.02,-0.03 -0.03,-0.04 -0.07,-0.07 -0.1,-0.11l-0.05 -0.05c-0.03,-0.03 -0.03,-0.04 -0.06,-0.06 -0.03,-0.03 -0.09,-0.06 -0.16,-0.05 -0.03,0.01 -0.05,0.02 -0.07,0.03 -0.03,0.01 -0.04,0.03 -0.06,0.05 -0.03,0.02 -0.06,0.05 -0.09,0.07 -0.01,0.01 -0.01,0.02 -0.02,0.03 -0.02,0.01 -0.04,0.03 -0.06,0.05 -0.01,0.01 -0.09,0.08 -0.1,0.09 -0.01,0.02 -0.03,0.05 -0.04,0.09 -0.02,0.06 0,0.12 0.03,0.16 0.02,0.03 0.03,0.04 0.05,0.06l0.15 0.17c0.01,0 0.02,0.02 0.03,0.02 0.01,0.01 0.02,0.02 0.02,0.03l0.08 0.08c0.01,0.01 0.02,0.02 0.03,0.03l0.05 0.06c0.01,0.01 0.09,0.11 0.1,0.11z>');logo2 = new fabric.Path('M0.91 1.09c0,0.01 -0.01,0.01 -0.01,0.01 0,0 0,0.01 -0.01,0.01l-0.03 0.03c-0.01,0 -0.02,0.01 -0.02,0.01l-0.1 0.1c0,0 0,0 -0.01,0 -0.01,0.02 -0.03,0.03 -0.04,0.04l-0.03 0.03c-0.01,0.01 -0.02,0.01 -0.02,0.02 -0.01,-0.01 -0.06,-0.07 -0.07,-0.08 -0.03,-0.03 -0.07,-0.08 -0.1,-0.11 -0.01,-0.01 -0.01,-0.02 -0.02,-0.02 0,-0.01 -0.01,-0.01 -0.01,-0.02 -0.03,-0.03 -0.05,-0.05 -0.07,-0.08 -0.03,-0.02 -0.08,-0.09 -0.11,-0.11 -0.07,-0.05 -0.14,-0.05 -0.22,-0.02 -0.01,0.01 -0.03,0.03 -0.04,0.03 0,0.01 0.05,0.07 0.06,0.07l0.07 0.08c0,0 0,0 0.01,0.01 0,0 0.01,0.01 0.01,0.01 0.01,0.01 0.02,0.02 0.02,0.03l0.04 0.04c0.05,0.05 0.1,0.1 0.14,0.16 0,0 0.01,0 0.01,0.01l0.09 0.1c0.01,0.01 0.02,0.02 0.02,0.03 0.01,0.01 0.02,0.01 0.03,0.02 0.04,0.03 0.09,0.06 0.16,0.05 0.05,0 0.09,-0.03 0.13,-0.06 0.02,-0.02 0.04,-0.04 0.07,-0.06l0.07 -0.07c0.02,-0.02 0.13,-0.11 0.13,-0.12 0.01,0 0.01,-0.01 0.02,-0.01 0.06,-0.1 0.05,-0.19 -0.02,-0.27l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,0 -0.01,-0.01 -0.01,-0.01l-0.09 -0.1c-0.02,-0.02 -0.03,-0.04 -0.05,-0.06 -0.02,-0.02 -0.03,-0.04 -0.05,-0.05 -0.01,-0.02 -0.1,-0.11 -0.1,-0.12 -0.02,0.01 -0.05,0.07 -0.06,0.09 -0.02,0.06 -0.01,0.12 0.02,0.17 0.01,0.03 0.04,0.06 0.06,0.08 0.04,0.04 0.07,0.08 0.1,0.12l0.19 0.2c0.01,0.01 0.02,0.02 0.02,0.02zm-0.35 0.04c0,-0.01 0.01,-0.01 0.02,-0.02 0.04,-0.06 0.06,-0.12 0.04,-0.19 -0.02,-0.07 -0.05,-0.09 -0.09,-0.13l-0.03 -0.04c-0.01,0 -0.01,-0.01 -0.02,-0.02 -0.03,-0.02 -0.06,-0.06 -0.09,-0.09l-0.1 -0.11c-0.01,-0.01 -0.07,-0.07 -0.07,-0.08 0.01,0 0.01,-0.01 0.02,-0.01 0,-0.01 0,-0.01 0.01,-0.01l0.04 -0.04c0.01,-0.01 0.02,-0.02 0.03,-0.03 0.01,0 0.01,-0.01 0.02,-0.01l0.12 -0.11c0,-0.01 0.02,-0.03 0.03,-0.03l0.08 0.09c0.03,0.03 0.05,0.05 0.07,0.08l0.16 0.17c0.04,0.04 0.06,0.07 0.11,0.09 0.07,0.03 0.12,0.02 0.18,-0.01 0.01,0 0.03,-0.02 0.04,-0.03 0,0 -0.02,-0.02 -0.02,-0.02l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03l-0.05 -0.05c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,-0.01 -0.01,-0.02 -0.02,-0.03 -0.03,-0.04 -0.07,-0.07 -0.1,-0.11l-0.05 -0.05c-0.03,-0.03 -0.03,-0.04 -0.06,-0.06 -0.03,-0.03 -0.09,-0.06 -0.16,-0.05 -0.03,0.01 -0.05,0.02 -0.07,0.03 -0.03,0.01 -0.04,0.03 -0.06,0.05 -0.03,0.02 -0.06,0.05 -0.09,0.07 -0.01,0.01 -0.01,0.02 -0.02,0.03 -0.02,0.01 -0.04,0.03 -0.06,0.05 -0.01,0.01 -0.09,0.08 -0.1,0.09 -0.01,0.02 -0.03,0.05 -0.04,0.09 -0.02,0.06 0,0.12 0.03,0.16 0.02,0.03 0.03,0.04 0.05,0.06l0.15 0.17c0.01,0 0.02,0.02 0.03,0.02 0.01,0.01 0.02,0.02 0.02,0.03l0.08 0.08c0.01,0.01 0.02,0.02 0.03,0.03l0.05 0.06c0.01,0.01 0.09,0.11 0.1,0.11z>');color5 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-51.15 10.61l47.96 0 0 580.66 -544.3 0 0 -3.35 -47.18 0 0 -581.04 543.52 0 0 3.73zm-498.85 580.22l-50 0 0 9.17 50 0 0 -9.17z');color6 = new fabric.Path('M346.96 263.31c-2.69,0.08 -5.53,0.19 -8.5,0.34l-44.53 0.52 -49.22 -1.04c-1.05,-0.01 -2.08,-0.04 -3.11,-0.07l-44.41 298.98c-7.18,1.55 -14.27,7.67 -21.42,10.48l-26.07 14.49 -6.1 -0.91 52.45 -353.1 6.33 36.98 1.96 -2.53 3.12 -1.26c0.24,-1.91 6.16,-2.8 14.56,-3.37 1.78,-0.12 3.53,-0.17 5.24,-0.19 0.24,-1.32 0.24,-2.64 -0.05,-3.96 4.56,-6.11 10.19,-10.78 13.47,-16.57 2.57,-3.4 7.7,-13.45 13.9,-15.59 6.86,-2.12 16.61,-0.73 21.84,-0.59 19.09,1.16 34.89,-0.21 52.38,0.16 4.84,0.4 8.55,3.43 11.57,8.08l9.11 13.87c2.59,3.93 6.67,6.5 9.7,10.67l-1.64 4.45c12.22,0.06 20.05,1.09 22.65,3.3l5.53 3.22 7.26 -33.25 51.95 349.68 -5.47 0.82 -27.65 -15.38c-6.88,-2.7 -13.69,-8.45 -20.58,-10.27l-44.27 -297.96zm-210.03 -159.48c2.74,0.59 4.53,-0.59 7.13,-0.49 5.45,3.19 15.06,4.82 23.18,8.6 2.88,4.01 5.88,7.93 8.74,11.97 -6.65,-2.64 -13.3,-6 -19.95,-7.93 -4.16,-0.1 -7.43,-1.5 -9.77,-4.3 -2.88,-3.01 -6.97,-4.68 -9.33,-7.85zm274.6 20.02l8.98 -12.11c8.3,-3.74 19.29,-5.24 23.29,-8.45 2.12,0.87 4.7,1.04 7.86,0.34l-2.73 2.84c-2.08,1.28 -2.74,3.01 -8.79,4 -1.29,3.63 -19.08,8.92 -28.61,13.38zm-240.19 -116.66l243.15 0 0 11.71 -0.43 1.39c-1.54,6.18 -4.76,8.2 -9.15,10.8 -9.36,5.56 -26.9,8.14 -51.08,8.15 -27.65,-0.26 -55.36,0 -82,-0.01 -23.2,0.14 -47.74,0.24 -70.36,-2.28 -15.22,-2.37 -22.96,-6.7 -27.75,-16.66l-2.38 -5.52 0 -7.58z');color7 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-550 590.83l-50 0 0 9.17 50 0 0 -9.17z');color8 = new fabric.Path('M396.06 154.8l3.96 33.54 59.65 -10.93 -12.93 -68.81 -2 0.64c-1.08,0.46 -2.52,0.89 -4.6,1.23 -0.93,2.62 -10.47,6.11 -19.29,9.52 -2.15,0.88 -4.32,1.74 -6.48,2.6 -1,0.42 -1.96,0.84 -2.84,1.26l0.12 -0.17 -0.4 0.16c-3.94,6.31 -7.73,12.07 -11.33,17l-3.86 13.96zm-256.38 -46.54l-9.75 60.23 2.73 12.1 55.74 7.67 5.14 -25.81 -5.98 -21.61c-3.6,-4.93 -7.39,-10.69 -11.33,-17 -4.55,-1.84 -9.14,-3.6 -13.65,-5.53 -2.86,-1.22 -4.64,-2.05 -7.29,-2.79 -1.7,-0.47 -3.24,0.31 -5.26,-1.15 -0.91,-0.65 -3.07,-2.07 -3.6,-2.95 -0.18,-0.18 -0.93,-0.35 -1.36,-0.77 -0.38,-0.37 -0.42,-1.03 -0.82,-0.93l-4.57 -1.46z'); var cl1='#FBB138'; $('#spncl1').css('background-color', cl1); var cl2='#282829'; $('#spncl2').css('background-color', cl2); var cl3='#FFFFFF'; $('#spncl3').css('background-color', cl3); var cl4='#96989A'; $('#spncl4').css('background-color', cl4); canvas.add(color1.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl1 }));canvas.add(color2.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl2 }));canvas.add(color3.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl3 }));canvas.add(color4.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl4 }));canvas.add(logo1.set({ left: 287, top: 56, scaleX: 11, scaleY: 11, flipY: false, strokeWidth: 0.03, stroke: '#191919', fill: '#FFFFFF' }));canvas.add(logo2.set({ left: 0, top: 300, scaleX: 15, scaleY: 15, flipY: false, strokeWidth: 0.03, stroke: '#191919', fill: '#FFFFFF' }));canvast.add(color5.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl1 }));canvast.add(color6.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl2 }));canvast.add(color7.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl3 }));canvast.add(color8.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl4 }));color1.selectable=false;color2.selectable=false;color3.selectable=false;color4.selectable=false;logo1.selectable=false;logo2.selectable=false;color5.selectable=false;color6.selectable=false;color7.selectable=false;color8.selectable=false; var dbplnumber = "23"; var dbteam = "TEAM"; var dbplayer = "PLAYER"; var dbbtag = "btag.svg"; var dbfront3d = "../virtual3d_images/antz_front_161.virtual"; var dbback3d = "../virtual3d_images/antz_back_161.virtual"; var dbtagleft = "370"; var dbtagtop = "250"; var dbtagsize = "35"; fabric.Image.fromURL(dbbtag, function(oImgj) { oImgj.set({left:dbtagleft, top:dbtagtop}); oImgj.scaleToWidth(dbtagsize); canvas.add(oImgj); oImgj.selectable = false; }); /* mask load */ fabric.Image.fromURL(dbfront3d, function(oImgj) { oImgj.set({left:300, top:300}); oImgj.scaleToWidth(600); canvas.add(oImgj); oImgj.selectable = false; }); fabric.Image.fromURL(dbback3d, function(oImgj) { oImgj.set({left:300, top:300}); oImgj.scaleToWidth(600) canvast.add(oImgj); oImgj.selectable = false; }); /* Color Change in SVG */ 977,983 $("#color1").on("click", "li", function (event) { event.preventDefault(); $('#box').prop('checked', true); var col = $(this).children('span').css('background-color'); var newcol = new fabric.Color(col).toHex(); $('#ctitle').html($(this).attr('title')); color1.set('fill', col);color5.set('fill', col); $('#newcolor').css('background-color', newcol); var color1atr = $(this).attr('title'); $('#color1val').val(color1atr); $(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col); canvas.renderAll(); canvast.renderAll(); }); 978,984 $("#color2").on("click", "li", function (event) { event.preventDefault(); $('#box').prop('checked', true); var col = $(this).children('span').css('background-color'); var newcol = new fabric.Color(col).toHex(); $('#ctitle').html($(this).attr('title')); color2.set('fill', col);color6.set('fill', col); $('#newcolor').css('background-color', newcol); var color2atr = $(this).attr('title'); $('#color2val').val(color2atr); $(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col); canvas.renderAll(); canvast.renderAll(); }); 979,985 $("#color3").on("click", "li", function (event) { event.preventDefault(); $('#box').prop('checked', true); var col = $(this).children('span').css('background-color'); var newcol = new fabric.Color(col).toHex(); $('#ctitle').html($(this).attr('title')); color3.set('fill', col);color7.set('fill', col); $('#newcolor').css('background-color', newcol); var color3atr = $(this).attr('title'); $('#color3val').val(color3atr); $(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col); canvas.renderAll(); canvast.renderAll(); }); 980,986 $("#color4").on("click", "li", function (event) { event.preventDefault(); $('#box').prop('checked', true); var col = $(this).children('span').css('background-color'); var newcol = new fabric.Color(col).toHex(); $('#ctitle').html($(this).attr('title')); color4.set('fill', col);color8.set('fill', col); $('#newcolor').css('background-color', newcol); var color4atr = $(this).attr('title'); $('#color4val').val(color4atr); $(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col); canvas.renderAll(); canvast.renderAll(); }); /*Front Text start*/ /*Front Team text start*/ var teamfrontTControl = document.getElementById('teamfront') function updateControls() { teamfrontTControl.value = teamfront.getText(); } teamfrontTControl.onkeyup = function () { var teamfrontText = document.getElementById('teamfront').value; var nLength = teamfrontText.length; teamfrontText = " "+teamfrontText; $('#teamfrontval').val(teamfrontText); teamfront1.setText(teamfrontText) canvas.renderAll() updateControls() } var dbteamfont = "35"; var dbteamstroke = "1"; var dbteamleft = "290"; var dbteamtop = "110"; var teamfront = $('#teamfront').val(); var nLen = teamfront.length; teamfront = " "+teamfront; teamfront1 = new fabric.Text(teamfront, { fontSize: dbteamfont, left: dbteamleft, top: dbteamtop, fill: $('#front_sold_color').val(), fontFamily: $('#name_ffamily').val(), stroke: $('#front_outline_color').val(), strokeWidth: dbteamstroke }); canvas.add(teamfront1); teamfront1.selectable=true; teamfront1.on('selected', function() { $('#scufontfamily').val(this.get("fontFamily")); }); var dbnm1font = "60"; var dbnm1stroke = "2"; var dbnm1left = "295"; var dbnm1top = "160"; var dbnm1angle = "0"; playernumber3 = new fabric.Text(dbplnumber, { fontSize: dbnm1font, left: dbnm1left, top: dbnm1top, fill: $('#front_sold_color').val(), fontFamily: $('#number_ffamily').val(), stroke: $('#front_outline_color').val(), strokeWidth: dbnm1stroke, angle: dbnm1angle }); var dbnm2font = "100"; var dbnm2stroke = "2"; var dbnm2left = "300"; var dbnm2top = "170"; var dbnm2angle = "0"; playernumber4 = new fabric.Text(dbplnumber, { fontSize: dbnm2font, left: dbnm2left, top: dbnm2top, fill: $('#front_sold_color').val(), fontFamily: $('#number_ffamily').val(), stroke: $('#front_outline_color').val(), strokeWidth: dbnm2stroke, angle: dbnm2angle }); canvas.add(playernumber3);canvast.add(playernumber4);playernumber3.selectable=true; playernumber4.selectable=true; playernumber3.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); playernumber4.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); /*Front Team text end*/ var playernumberTControl = document.getElementById('playernumber') function updateControls() { playernumberTControl.value = playernumber.getText(); } playernumberTControl.onkeyup = function () { var playernumberText = document.getElementById('playernumber').value; var nLength = playernumberText.length; playernumberText = " "+playernumberText; $('#playernumberval').val(playernumberText); playernumber.setText(playernumberText) canvas.renderAll() canvast.renderAll() updateControls() } var dbplayerfont = "30"; var dbplayerstroke = "1"; var dbplayerleft = "285"; var dbplayertop = "80"; var PlayerName = $('#playernumber').val(); var nLen = PlayerName.length; PlayerName = " "+PlayerName; playernumber = new fabric.Text(PlayerName, { fontSize: dbplayerfont, left: dbplayerleft, top: dbplayertop, fontFamily: $('#name_ffamily').val(), fontWeight: 'normal', fill: $('#front_sold_color').val(), stroke: $('#front_outline_color').val(), strokeWidth: dbplayerstroke }); canvast.add(playernumber);playernumber.selectable=true; playernumber.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); /*Front text EnD*/ var playernumber2TControl = document.getElementById('playernumber2') function updateControls() { playernumber2TControl.value = playernumber2.getText(); } playernumber2TControl.onkeyup = function () { var playernumber2Text = document.getElementById('playernumber2').value $('#playernumber2val').val(playernumber2Text); playernumber2.set({text: playernumber2Text}) playernumber3.set({text: playernumber2Text}) playernumber4.set({text: playernumber2Text}) playernumber5.set({text: playernumber2Text}) canvast.renderAll() canvas.renderAll() updateControls() } var dbnm3font = "150"; var dbnm3stroke = "2"; var dbnm3left = "0"; var dbnm3top = "230"; var dbnm3angle = "0"; playernumber5 = new fabric.Text(dbplnumber, { fontSize: dbnm3font, left: dbnm3left, top: dbnm3top, fill: $('#front_sold_color').val(), fontFamily: $('#number_ffamily').val(), stroke: $('#front_outline_color').val(), strokeWidth: dbnm3stroke, angle: dbnm3angle }); canvast.add(playernumber5);playernumber5.selectable=true playernumber5.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); var dbnm4font = "60"; var dbnm4stroke = "2"; var dbnm4left = "0"; var dbnm4top = "520"; var dbnm4angle = "0"; playernumber2 = new fabric.Text(dbplnumber, { fontSize: dbnm4font, left: dbnm4left, top: dbnm4top, fill: $('#front_sold_color').val(), fontFamily: $('#number_ffamily').val(), stroke: $('#front_outline_color').val(), strokeWidth: dbnm4stroke, angle: dbnm4angle }); canvast.add(playernumber2);playernumber2.selectable=true; playernumber2.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); $('#down').click(function(){ $('#down').addClass('tsactive'); $('#straight').removeClass('tsactive'); $('#up').removeClass('tsactive'); canvast.remove(playernumber); PlayerName = $('#playernumber').val(); playernumber = new fabric.CurvedText(PlayerName,{ width: 100, height: 50, left: dbplayerleft, top: dbplayertop, textAlign: 'center', fontFamily: $('#scufontfamily').val(), fontWeight: 'normal', fill: $('#front_sold_color').val(), stroke: $('#front_outline_color').val(), radius: 100, fontSize: dbplayerfont, spacing: 7, reverse: true, angle: -5, }); canvast.add(playernumber); playernumber.selectable=true canvast.renderAll() updateControls(); playernumber.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); }); $('#up').click(function(){ $('#up').addClass('tsactive'); $('#straight').removeClass('tsactive'); $('#down').removeClass('tsactive'); canvast.remove(playernumber); PlayerName = $('#playernumber').val(); playernumber = new fabric.CurvedText(PlayerName,{ width: 100, height: 50, left: dbplayerleft, top: dbplayertop, fontFamily: $('#scufontfamily').val(), fontWeight: 'normal', fill: $('#front_sold_color').val(), stroke: $('#front_outline_color').val(), radius: 100, fontSize: dbplayerfont, spacing: 7, textAlign: 'center', reverse: false, angle: 7, }); canvast.add(playernumber); playernumber.selectable=true canvast.renderAll() updateControls(); playernumber.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); }); $('#straight').click(function(){ $('#straight').addClass('tsactive'); $('#up').removeClass('tsactive'); $('#down').removeClass('tsactive'); canvast.remove(playernumber); PlayerName = $('#playernumber').val(); playernumber = new fabric.Text(PlayerName, { fontSize: dbplayerfont, left: dbplayerleft, top: dbplayertop, fontFamily: $('#scufontfamily').val(), fontWeight: 'normal', fill: $('#front_sold_color').val(), stroke: $('#front_outline_color').val(), }); canvast.add(playernumber); playernumber.selectable=true canvast.renderAll() updateControls(); playernumber.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); }); $('#scufontcolor li').click(function() { var col = $(this).data('color'); $('#front_sold_color').val(col); if($('#showFront').hasClass('active')) { try { var selText = canvas.getActiveObject().getText(); if(isNaN(selText)) { canvas.getActiveObject().setFill(col); canvas.renderAll(); } else{ setNumberFillColor(col) } } catch(err) { } } if($('#showBack').hasClass('active')) { try { var selText = canvast.getActiveObject().getText(); if(isNaN(selText)) { canvast.getActiveObject().setFill(col); canvast.renderAll(); } else{ setNumberFillColor(col) } } catch(err) { } } backtcolor_change(col); }); function setNumberFillColor(col){ canvas.setActiveObject(playernumber3); canvas.getActiveObject().setFill(col); canvas.setActiveObject(playernumber4); canvas.getActiveObject().setFill(col); canvas.renderAll(); canvast.setActiveObject(playernumber2); canvast.getActiveObject().setFill(col); canvast.setActiveObject(playernumber5); canvast.getActiveObject().setFill(col); canvast.renderAll(); } function setNumberStrokeColor(col){ canvas.setActiveObject(playernumber3); canvas.getActiveObject().setStroke(col); canvas.setActiveObject(playernumber4); canvas.getActiveObject().setStroke(col); canvas.renderAll(); canvast.setActiveObject(playernumber2); canvast.getActiveObject().setStroke(col); canvast.setActiveObject(playernumber5); canvast.getActiveObject().setStroke(col); canvast.renderAll(); } function backtcolor_change(selected_color) { $('#scufontcolor li').each(function (indx, ele) { if($(ele).data('color') == selected_color) { $(ele).children('span').addClass('selected'); } else { $(ele).children('span').removeClass('selected'); } }); } $('#scufontocolor li').click(function() { var col = $(this).data('color'); $('#front_outline_color').val(col); if($('#showFront').hasClass('active')) { try { var selText = canvas.getActiveObject().getText(); if(isNaN(selText)) { canvas.getActiveObject().setStroke(col); canvas.renderAll(); } else{ setNumberStrokeColor(col) } } catch(err) { } } if($('#showBack').hasClass('active')) { try { var selText = canvast.getActiveObject().getText(); if(isNaN(selText)) { canvast.getActiveObject().setStroke(col); canvast.renderAll(); } else{ setNumberStrokeColor(col) } } catch(err) { } } backtocolor_change(col); }); function backtocolor_change(selected_color) { $('#scufontocolor li').each(function (indx, ele) { if($(ele).data('color') == selected_color) { $(ele).children('span').addClass('selected'); } else { $(ele).children('span').removeClass('selected'); } }); } function setNumberFontFamily(strFontFamily) { canvas.setActiveObject(playernumber3); canvas.getActiveObject().setFontFamily(strFontFamily); canvas.setActiveObject(playernumber4); canvas.getActiveObject().setFontFamily(strFontFamily); canvas.renderAll(); canvast.setActiveObject(playernumber2); canvast.getActiveObject().setFontFamily(strFontFamily); canvast.setActiveObject(playernumber5); canvast.getActiveObject().setFontFamily(strFontFamily); canvast.renderAll(); } document.getElementById('scufontfamily').onchange = function() { if($('#showFront').hasClass('active')) { try { var selText = canvas.getActiveObject().getText(); if(isNaN(selText)) { canvas.getActiveObject().setFontFamily(this.value); canvas.renderAll(); } else{ setNumberFontFamily(this.value); } } catch(err) { } } if($('#showBack').hasClass('active')) { try { var selText = canvast.getActiveObject().getText(); if(isNaN(selText)) { canvast.getActiveObject().setFontFamily(this.value); canvast.renderAll(); } else{ setNumberFontFamily(this.value); } } catch(err) { } } }; /******************************END***************************/ function hidesuccess() { document.getElementById('logosucess').style.display = "none"; } document.getElementById('frontlogos').onchange = function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { document.getElementById('logosucess').style.display = "inline"; var imgObj = new Image(); imgObj.src = event.target.result; imgObj.onload = function () { logo = new fabric.Image(imgObj); logo.set({left: 160,top: 80}); logo.scaleToWidth(100); canvas.add(logo); canvas.setActiveObject(logo); logo.selectable=true setTimeout(hidesuccess, 5000); } } reader.readAsDataURL(e.target.files[0]); document.getElementById('frontlogos'); } canvas.renderAll(); document.getElementById('backlogos').onchange = function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { document.getElementById('logosucess').style.display = "inline"; var imgObj = new Image(); imgObj.src = event.target.result; imgObj.onload = function () { logo = new fabric.Image(imgObj); logo.set({left: 160,top: 80}); logo.scaleToWidth(100); canvast.add(logo); canvast.setActiveObject(logo); logo.selectable=true setTimeout(hidesuccess, 5000); } } reader.readAsDataURL(e.target.files[0]); document.getElementById('backlogos'); } canvast.renderAll(); $(window).load(function(){ setTimeout(function(){ $( "#showFront" ).trigger( "click" ); }, 1500); $('#playernumber2').val(dbplnumber); $('#teamfront').val(dbteam); $('#playernumber').val(dbplayer); $x = $('#name_ffamily').val(); $('#teamfront').css("font-family",$x); $('#playernumber').css("font-family",$x); $y = $('#number_ffamily').val(); $('#playernumber2').css("font-family",$y); /*$('#mme a').css('color', ''); $('#mme').parent().css('border', '');*/ $v = $('#name_ffamily').val(); $('#scufontfamily').css("font-family",$v); var dbnff = $('#name_ffamily').val(); $("#scufontfamily > [value=" + dbnff + "]").attr("selected", "true"); }) $('#scufontfamily').change(function() { $('#teamfront').css("font-family", $(this).val()); $('#playernumber').css("font-family", $(this).val()); $('#scufontfamily').css("font-family", $(this).val()); }); } loadBaseShirts(); canvas.calcOffset();