// 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('M296.39 174.62l0.27 -45.99 0.09 -14.39 -0.19 -16.21 0 -0.06 -0.29 -0.01 -4.25 0c-3.79,-0.13 -6.93,-0.7 -9.28,-1.2 -7.04,-1.51 -13.21,-2.61 -18.65,-4.54 -6.35,-2.25 -11.77,-5.95 -16.21,-10.79 -2.13,-4.66 -6.59,-7.43 -6.37,-12.58 0.83,-5.37 4.48,-10.04 10.2,-14.18 5.12,-3.28 10.84,-5.51 17.07,-6.84 0.76,-0.05 1.21,-0.3 1.1,-0.9 7.56,-3.35 16.52,-5.31 26.67,-6.07 10.27,-0.77 19.64,-0.45 29.69,2.01 4.27,1.04 8.2,2.4 11.75,4.13l1.13 0.95c4.67,1.51 9.32,3.39 13.93,5.68 4.42,3.42 7.95,7 9.6,10.95 1.34,3.21 0.89,6.41 -0.8,9.57 -2.26,3.16 -5.27,6 -6.69,8.67 -1.57,2.83 -3.35,4.52 -5.3,5.32 -4.64,3.08 -10.28,5.32 -16.87,6.77 -12.52,2.73 -21.7,3.76 -28.1,3.36l-0.12 0 -0.17 0.84 -0.16 16.72c-0.25,-0.63 -0.86,-1.31 -0.85,-2.82l0.06 -6.6 -1.02 -0.43 0.59 -0.18c0.51,-0.73 0.85,-1.47 1.03,-2.2l0.09 -1.95c-0.8,-0.54 -1.23,-0.1 -1.85,-0.15 -0.6,-0.25 -0.73,-0.82 -1.8,-0.75 -0.9,0.05 -1.05,0.55 -1.57,0.83 -1.1,-0.37 -1.74,-0.15 -2,0.59l0.95 2.83c0.14,0.34 0.33,0.61 0.56,0.8l-0.46 1 -0.05 6.01c-0.06,1.67 -1.01,2.03 -0.97,3.27 0.05,1.77 1.42,2.69 3.56,2.74 1.5,0.03 3.08,-0.47 3.71,-2l-0.11 11.69 -0.35 42.45c40.85,-19.61 79.63,-35.91 107.44,-57.94l-7.88 -60.25 -36.72 -24.22 -125.78 3.13 -44.39 22.98 -89.99 86.39 -3.93 135.26c4.46,36.75 50.22,57.43 76.31,67.3l7.49 -34.93 -0.03 -45.95 -3.7 -7.88c3.47,-10.61 8.38,-20.02 16.69,-25.91 25.56,-18.12 55.99,-33.91 88.57,-50.2 2.79,-1.39 5.57,-2.76 8.35,-4.12zm6.88 358.13l0 -9.45 -1.85 0 0.01 1.28 -0.45 0.46 -3.31 -0.03 -0.04 -1.71 -1.51 0 0 9.45 0.42 0c0.12,2.08 0,3.88 -0.56,5.08 -0.16,0.28 -0.24,0.59 -0.24,0.91 0,1.42 1.67,2.57 3.72,2.57 2.06,0 3.73,-1.15 3.73,-2.57 0,-0.43 -0.16,-0.84 -0.43,-1.2 -1.17,-1.66 -0.89,-3.9 -0.77,-4.79l1.28 0zm-5.5 -1.03l0.64 0c0.07,0.3 0.34,0.53 0.66,0.53l1.08 0c0.32,0 0.58,-0.22 0.66,-0.51 0.05,0.06 0.02,1.72 0.02,1.93 0,0.05 -0.04,0.08 -0.08,0.08l-2.98 0c-0.04,0 -0.08,-0.03 -0.08,-0.08l0 -1.87c0,-0.05 0.04,-0.08 0.08,-0.08zm1.69 5.28c1.55,0 2.79,0.78 2.79,1.74 0,0.96 -1.24,1.74 -2.79,1.74 -1.54,0 -2.78,-0.78 -2.78,-1.74 0,-0.96 1.24,-1.74 2.78,-1.74zm76.97 -136.98l1.56 8.01c1.73,0.29 3.88,-0.49 4.31,-1.82l-0.9 -7.11c-0.5,-4 -1.34,-5.13 -3.24,-4.35 -1.86,0.77 -2.22,2.2 -1.73,5.27zm-152.95 -1.27c0.22,-1.82 -0.06,-3.54 -1.76,-4.31 -1.57,-0.7 -2.69,0.24 -3.02,2.49 -0.59,3.02 -1.14,6.02 -1.66,9.02 1.19,1.22 2.68,1.94 4.46,2.12 0.68,-3.02 1.34,-6.12 1.98,-9.32zm75.74 -288.5l0 -1.55c0,-0.1 0.08,-0.19 0.18,-0.19l2.68 0c0.11,0 0.19,0.09 0.19,0.19l0 1.55c0,0.1 -0.08,0.18 -0.19,0.18l-2.68 0c-0.1,0 -0.18,-0.08 -0.18,-0.18zm-41.26 67.44l0 -9.69c0,-0.22 0.13,-0.42 0.32,-0.51 0.13,0.08 0.28,0.12 0.45,0.14 0.18,0 0.34,-0.04 0.47,-0.12 0.17,0.1 0.29,0.28 0.29,0.49l0 9.69c0,0.31 -0.25,0.56 -0.56,0.56l-0.42 0c-0.3,0 -0.55,-0.25 -0.55,-0.56zm42.84 -59.3c-1.68,0 -3.05,-1 -3.05,-2.22 0,-1.22 1.37,-2.21 3.05,-2.21 1.69,0 3.05,0.99 3.05,2.21 0,1.22 -1.36,2.22 -3.05,2.22z');color3 = new fabric.Path('M261.09 111.27c0.95,-4.59 1.88,-9.09 2.85,-12.79 0.87,-1.06 0.93,-1.99 0.15,-1.98 -1.38,0.02 -2.44,0.8 -2.87,1.77 -1.27,4.03 -2.03,8.18 -2.88,12.3 -0.91,4.43 -1.11,8.86 -1.17,13.24 -0.18,6 -0.2,11.39 -0.1,16.28 0.13,5.05 0.17,10.1 0.39,15.14 0.07,3.64 0.08,7.34 0.2,10.92 0.04,1.19 0.4,1.65 1.05,1.7 0.69,0 1.02,-0.5 1.02,-1.9l0.06 -10.84c0.18,-4.67 -0.04,-9.88 0.06,-14.87 -0.19,-5.24 -0.18,-10.63 0.05,-16.23 0.15,-4.68 0.44,-9.13 1.19,-12.74zm36.66 422.71l2.98 0c0.04,0 0.07,-0.04 0.07,-0.08 0,-0.21 0.04,-1.87 -0.02,-1.93 -0.07,0.29 -0.34,0.5 -0.65,0.5l-1.08 0c-0.32,0 -0.59,-0.22 -0.66,-0.52l-0.64 0c-0.05,0 -0.08,0.03 -0.08,0.08l0 1.87c0,0.04 0.03,0.08 0.08,0.08zm-1.53 -314.85l0.02 -17.13c-21.64,11.2 -41.88,21.79 -57.2,29.91l57.18 -12.78zm7.78 -1.74l105.84 -23.66c28.28,-8.39 51.61,-11.99 63.48,-4.5l12.89 6.45 -10.58 -44.61 -25.75 -26.39 -16.31 10.16c-0.9,-2.34 -68.98,31.88 -129.6,63.16l0.03 19.39zm-1.77 321.58c0,-0.96 -1.25,-1.74 -2.79,-1.74 -1.54,0 -2.79,0.78 -2.79,1.74 0,0.96 1.25,1.74 2.79,1.74 1.54,0 2.79,-0.78 2.79,-1.74zm-5.99 -135.21c-41.59,-18.55 -79.28,-36.13 -114.08,-56.4l-3.01 -4.27 -0.16 0.75c-31.54,-11.99 -70.88,-32.05 -76.11,-65.93l-36.98 5.56 -3.12 302.34 187.5 -1.56 286.72 -3.12 -25.53 -83.99 -101.23 -42.18c-6.14,-2.87 -12.2,-5.67 -18.19,-8.42l1.16 3.9c1.4,4.79 2.46,9.09 3.18,12.93 0.72,3.78 0.88,7.17 1.33,10.93 0.37,3.13 0.95,5.71 1.52,7.86 1.07,4.13 2.29,7.45 3.36,10.31 0.77,2.08 1.47,4.63 0.39,5.65 -1.27,1.18 -2.19,-0.43 -3.44,-4.49l-3.22 -10.49c-1.34,-4.32 -1.36,-8.57 -2.27,-13.44 -1.09,-6.18 -2.65,-12.39 -4.73,-18.63l-2.24 -6.8c-29.51,-13.46 -57.25,-25.57 -83.45,-37.21l-0.13 76.78 -0.26 39.39 -1.85 0.1 0 0.2 1.85 0 0 9.45 -1.28 0c-0.12,0.89 -0.4,3.13 0.77,4.79 0.27,0.36 0.43,0.77 0.43,1.2 0,1.42 -1.67,2.57 -3.73,2.57 -2.06,0 -3.72,-1.15 -3.72,-2.57 0,-0.32 0.08,-0.63 0.24,-0.91 0.56,-1.21 0.67,-3 0.56,-5.08l-0.42 0 0 -9.45 1.51 0 -0.01 -0.27 -1.77 0.15 0.41 -43.66 0 -75.99zm-76.66 12.77c-1.67,7.15 -3.47,14.35 -5.84,21.44 -2.33,6.97 -4.36,13.77 -6.49,20.68 -1.59,5.16 -2.3,12.02 -3.54,18.96 -1.03,5.79 -2.5,10.59 -3.93,14.72l-2.25 5.03c-0.11,0.25 -0.57,0.3 -1.14,-0.02 -0.47,-0.26 -0.74,-0.9 -0.37,-1.98l1.42 -4.17c1.4,-3.85 2.93,-8.3 3.93,-13.68 1.19,-6.44 1.35,-12.82 2.95,-19.43 1.68,-6.97 4.05,-13.84 6,-20.78 1.99,-7.06 3.69,-14.35 5.18,-21.88 0.95,-6.14 2.01,-12.16 3.17,-18.26 0.34,-2.25 1.46,-3.2 3.03,-2.49 1.7,0.77 1.98,2.48 1.76,4.31 -0.26,1.28 -0.52,2.57 -0.8,3.85 -0.93,4.57 -2,9.17 -3.08,13.7zm118.88 -310.73c0.98,4.82 1.28,10.18 1.48,15.76 0.28,8.68 0.22,17.19 0.09,25.68 -0.09,6.63 -0.55,13.11 -0.32,19.88 0.02,0.7 0.58,1 1.39,0.92 0.71,-0.11 1.27,-0.4 1.26,-1.08 -0.04,-6.65 -0.05,-13.2 0.17,-19.72 0.28,-8.49 0.46,-17.02 0.17,-25.69 -0.29,-5.36 -0.57,-10.76 -1.69,-16.09 -0.48,-2.27 -1.18,-5.19 -1.89,-6.69 -0.41,-0.81 -1,-1.24 -1.68,-1.08 -0.55,0.14 -0.63,0.61 -0.47,1.04 0.98,1.92 0.92,4.28 1.49,7.07z');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>');color4 = 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');color5 = new fabric.Path('M209.11 93.34c-0.78,5.58 0.29,10.99 2.37,16.31 5.73,16.06 17.04,30.58 32.83,43.87 3.76,3.34 7.37,6.12 10.78,8.11 5.75,4 17.18,5.46 31.28,5.73 5.64,0.11 10.92,0.14 15.81,0.06 51.51,27.9 96.65,55.69 111.97,82.9l3.15 79.36c30.5,-18.66 58.69,-40.01 84.19,-64.5l-2.52 -95.18 -42.97 -63.28 -69.87 -17.88 -0.01 0 3.29 -6.83 -19.87 -20.25 -7.94 -25.27 -47.53 -15.1 -63.54 7.42 -28.13 13.41 -1.3 27.09 -11.46 8.56 -0.53 15.47z');color6 = new fabric.Path('M502.98 263.76c-100.96,97.84 -244.64,146.04 -407.29,172.2l-17.49 109.39 157.5 37.5 130.62 0.63 154.38 -16.88 25.62 -63.75 -43.34 -239.09zm-347.91 -147.48c64.89,31.93 136.04,76.98 204.06,115.47 -93.03,-22.34 -179.05,-44.68 -237.03,-67.03l-15 -8.28 18.75 -46.56 29.22 6.4z'); var cl1='#FFFFFF'; $('#spncl1').css('background-color', cl1); var cl2='#283151'; $('#spncl2').css('background-color', cl2); var cl3='#ED3237'; $('#spncl3').css('background-color', cl3); 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(logo1.set({ left: 350, top: 160, scaleX: 15, scaleY: 15, flipY: false, strokeWidth: 0.03, stroke: '#191919', fill: '#FFFFFF' }));canvas.add(logo2.set({ left: 0, top: 0, scaleX: 15, scaleY: 15, flipY: false, strokeWidth: 0.03, stroke: '#191919', fill: '#FFFFFF' }));canvast.add(color4.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl1 }));canvast.add(color5.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl2 }));canvast.add(color6.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl3 }));color1.selectable=false;color2.selectable=false;color3.selectable=false;logo1.selectable=false;logo2.selectable=false;color4.selectable=false;color5.selectable=false;color6.selectable=false; var dbplnumber = "8"; var dbteam = "TEAM"; var dbplayer = "PLAYER"; var dbbtag = "btag.svg"; var dbfront3d = "../virtual3d_images/minnesota_front_87.virtual"; var dbback3d = "../virtual3d_images/minnesota_back_87.virtual"; var dbtagleft = "370"; var dbtagtop = "500"; 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 */ 389,394 $("#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);color4.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(); }); 390,395 $("#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);color5.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(); }); 391,396 $("#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);color6.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(); }); /*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 = "295"; var dbteamtop = "210"; 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 = "0"; var dbnm1top = "0"; 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 = "150"; var dbnm2stroke = "2"; var dbnm2left = "0"; var dbnm2top = "0"; 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 = "295"; var dbplayertop = "195"; 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 = "100"; var dbnm3stroke = "2"; var dbnm3left = "300"; var dbnm3top = "255"; 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 = "0"; 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();