// 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('M80.07 129.2c74.73,-16.76 172.43,-17.22 237.41,-0.35 0.35,-0.87 0.71,-1.74 1.1,-2.59 1.43,-3.22 2.44,-4.76 3.22,-7.04 -33.2,-9.56 -74.3,-14.27 -123.43,-14.07l0 -3.97c-48.22,1.22 -90.4,5.95 -124.29,15.5l0 0c1.48,3.53 3.3,6.47 4.88,9.94 0.39,0.85 0.76,1.71 1.11,2.58zm260.25 144.07l-21.36 170.35 -7.11 -6.3c-17.92,4.76 -73.66,9.85 -113.55,9.11l0 4.2c-42.29,0.88 -83.39,-2 -111.41,-7.22l-3.4 6.77 3.42 5.86c33.56,5.43 72.1,7.43 111.11,6.6l0 4.06c45.62,0.78 105.13,-4.57 114.51,-10.34l5.69 -6.89 -14.26 113.7 44.28 21.9 74.57 6.53 171.05 -6.06 1.4 -52.67 -33.09 -254.47 -221.85 -5.13zm-253.43 143.33c27.87,3.76 69.12,7.57 111.41,6.68l0 -4.2c40.58,0 95.63,-4.35 113.55,-9.11l9.47 8.4 -8.79 10.65c-9.38,5.77 -68.89,11.12 -114.51,10.33l0 -4.05c-39.01,0.82 -77.55,-1.18 -111.11,-6.61l-3.42 -5.86 3.4 -6.23zm0.72 -26.69c28,3.11 68.4,6.39 110.69,5.51l0 -4.2c40.58,0 90.03,-2.86 112.38,-6.9l9.47 8.4 -8.79 10.64c-15.31,4.74 -67.72,8.91 -113.34,8.13l0 -4.06c-39.01,0.83 -77.48,-1.24 -110.4,-5.43l-3.42 -5.86 3.41 -6.23zm-0.26 -25.39c28,1.67 68.66,4.57 110.95,3.68l0 -4.19c40.58,-0.01 89.71,-2.61 112.31,-5.67l9.47 8.4 -8.78 10.65c-15.96,4.21 -67.66,7.67 -113.28,6.88l0 -4.05c-39.01,0.82 -77.74,-1.63 -110.4,-4l-3.42 -5.86 3.15 -5.84zm2.88 -24.83c31.42,0.68 68.61,1.45 108.07,1.39l0 -4.2c36.5,-0.68 78.34,-1.02 109.58,-2.64l9.47 8.4 -8.79 10.65c-32.34,2.34 -72.43,3.79 -110.54,3.86l0 -4.06c-36.41,0.21 -71.46,-0.15 -107.52,-1.7l-3.41 -5.86 3.14 -5.84zm0 -25.38c31.32,-1.17 68.61,-0.25 108.07,-0.32l0 -4.19c36.01,-0.88 75.32,0.35 106.75,-0.39l9.47 8.4 -8.79 10.64c-32.44,1.03 -69.6,1.55 -107.71,1.61l0 -4.05c-36.41,0.21 -72.24,0.24 -107.52,0l-3.41 -5.85 3.14 -5.85zm-0.13 -24.46c31.13,-2.06 68.74,-2.12 108.2,-2.18l0 -4.19c35.99,-0.42 75.61,-0.75 106.75,1.61l9.47 8.4 -8.79 10.64c-32.05,-1.41 -69.7,-1.14 -107.71,-0.39l0 -4.05c-36.41,0.2 -72.78,0.34 -107.52,1.37l-3.41 -5.86 3.01 -5.35zm0.92 -23.83c31.13,-3.77 67.82,-5.04 107.28,-5.11l0 -4.19c35.99,-0.41 70.92,0.92 104.7,4.15l9.47 8.4 -8.79 10.64c-32.54,-2.63 -67.65,-3.68 -105.66,-2.92l0 -4.06c-36.41,0.21 -72,1.56 -106.59,4.3l-3.42 -5.86 3.01 -5.35zm-1.32 -75.09c30.98,-3.72 69.52,-6.8 108.6,-6.86l0 -4.2c35.63,-0.41 73.37,2.42 106.89,5.62l1.37 13.69c-0.38,2.03 -0.23,3.65 -0.06,5.41 -32.45,-2.62 -70.62,-5.2 -108.48,-4.45l0 -4.06c-36.19,0.21 -73.76,3.39 -108.18,6.12 -0.09,-1.06 -0.09,-2.12 0,-3.19 -0.31,-2.6 -0.38,-5.29 -0.14,-8.08zm1.64 24.43c31.13,-3.77 67.5,-6.23 106.96,-6.29l0 -4.2c35.99,-0.41 74.14,2.48 107.92,5.71l0.3 0.27c-0.07,0.57 -0.17,1.17 -0.3,1.81 -0.44,1.59 -0.42,3.15 -0.15,4.69 0.1,1.04 -0.26,2.08 0.29,3.12 0.46,1.67 0.31,3.42 -0.21,5.23l-0.15 3.85c-32.35,-2.6 -70.32,-5.16 -107.98,-4.41l0 -4.06c-36.41,0.21 -71.68,2.75 -106.27,5.49l-1.72 -2.94 0.31 -1.55c-0.46,-3.31 0.54,-3.65 0.59,-5.99l0.41 -0.73zm-0.32 24.78c31.13,-3.77 67.82,-5.04 107.28,-5.1l0 -4.2c35.99,-0.41 70.92,0.92 104.7,4.15l9.47 8.4 -8.79 10.64c-32.54,-2.63 -67.65,-3.68 -105.66,-2.92l0 -4.06c-36.41,0.21 -72,1.56 -106.59,4.3l-3.42 -5.86 3.01 -5.35zm-2.46 -61.82c35.48,-5.49 72.25,-7.93 109.81,-8.48l0 3.99c37.75,-1.19 74.07,1.35 109.22,6.89 0.89,-3.99 0.11,-8.76 0.59,-13.42 0.24,-0.67 0.49,-1.34 0.72,-2.03 -72.39,-11.32 -146.06,-11.03 -221.04,0.95l-0.28 0.34c0.39,3.74 0.59,7.52 0.98,11.76zm62.26 -129.22c-32.57,4.14 -62.78,10.95 -88.89,22.38l-0.18 -0.1c-0.27,-1.68 -0.25,-2.97 0.15,-3.78l-3.24 -3.25 6.55 -9.12 46.33 -20.78 8.01 2.18c6.87,-2.07 13.66,-3.47 20.38,-4.26 0.78,3 2.3,6.14 4.56,9.36 1.93,2.74 4.04,5.19 6.33,7.37zm99.83 -3.27c32.88,4.38 61.02,12.3 84.98,23.32 0.03,-0.48 0.05,-0.94 0.04,-1.37l2.77 -0.81 0.1 -0.08 -8.61 -9.28 -25.47 -14.73 -14.77 0.4c-9.33,-2.96 -20.01,-5.52 -32.48,-7.56 -0.92,1.96 -2.18,4.09 -3.7,6.33 -0.89,1.3 -1.84,2.55 -2.87,3.74l0.01 0.04zm-183.57 44.98c40.94,-13.71 84.98,-19.63 131.27,-19.89l0 -3.78c51.74,-0.39 95.15,6.78 131.43,20.45l0.04 -0.02c1.26,-2.96 2.38,-5.78 3.3,-8.38 -26.48,-11.39 -59.01,-18.64 -96.83,-22.3 -3.15,1.66 -6.59,3.14 -10.34,4.48 -15.9,5.65 -33.75,5.69 -53.96,-0.32 -5.48,-1.63 -10.53,-3.94 -15.07,-7.03 -36.23,4.01 -67.77,11.08 -93.98,21.65l-0.08 0.22c0.83,2.7 2,5.86 3.39,9.29l-0.69 2.49 1.47 2.83 0.05 0.31zm5.21 21.07c37.57,-11.04 80.35,-15.55 126.18,-16.27l0 -3.97c48.26,-0.13 90.37,4.93 125.37,16 0.21,-2.04 0.36,-4.04 0.4,-5.97 0.53,-1.01 1.02,-2.3 1.53,-3.74 -35.21,-11.68 -77.12,-17.91 -127.17,-17.52l0 -4.17c-48.54,1.15 -92.48,7.2 -130.62,19.44 1.19,5.96 2.64,11.34 4.31,16.2zm285.51 204.45l6.59 1.15 -16.69 124.79 -2.22 -0.61 -17.08 123.45 -2.36 1.23 -0.18 -2.45 16.99 -122.81 -1.97 -0.5 16.92 -124.25zm189.85 -0.59l2.82 -0.59 19.66 128.15 1.96 -0.78 15.76 119.28 -0.97 5.77 -4.54 -2.66 -16.52 -120 2.03 -0.74 -20.2 -128.43zm-14.51 2.76l6.96 -1.2 19.87 129.17 -2.34 0.62 16.86 120.6 -0.27 3.96 -2.54 -2.93 -16.95 -120.78 -2.11 0.43 -19.48 -129.87zm-184.43 -4.6l2.59 0.95 -18.02 124.07 1.81 0.37 -16.1 121.38 -2.39 1.22 -3.03 -5.13 15.03 -119.48 2.42 0.71 17.69 -124.09z');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>');color3 = 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');color4 = new fabric.Path('M81.26 244.72l-0.82 102.54 -6.77 103.13 37.5 13.54 158.07 3.91 43.49 -22.66 -8.71 -205.87 -1.47 -7.1 -1.97 -13.46c-0.47,-1.3 -0.52,-2.52 -0.68,-3.77 -0.24,-1.92 -0.45,-2.07 -0.18,-4.15 0.53,-3.97 1.61,-7.73 0.61,-12.31 -1.25,-8 -2.03,-16.13 -1.98,-24.52l1.43 -42.82c2.85,-6.41 3.85,-12.81 5.78,-19.22 3.04,-4.92 6.12,-10.58 9.28,-17.85 2.25,-4.61 4.26,-9.14 6.39,-13.71 -0.49,-1.88 -0.35,-3.44 0.72,-4.54 0.46,-0.95 1.47,-1.64 1.56,-2.69 0.08,-0.83 -0.11,-1.21 0.89,-2.06 1.38,-1.17 1.35,-3.15 3.55,-4.47l4.41 -2.88 -41.77 -26.13 -42.95 -16.82 1.36 3.08c-3.53,0.93 -6.42,2.26 -10.6,2.78 -9.69,1.23 -18.84,1.63 -28.27,2.2 -14.93,0.91 -29.43,0.45 -43.6,-0.19 -10.82,-0.5 -19.88,-1.62 -27.05,-3.91l0.94 -2.64 -2.56 -0.13 -66.16 29.79 -16.27 12.36 5.17 2.49c1.48,2.25 3.17,3.99 4.81,6.72 0.49,0.67 0.54,1.3 0.16,1.95 -0.24,0.42 0.13,1 0.47,1.39 1.67,2.1 2.31,4.24 2.32,6.4 0.5,1.76 2.78,5.16 4.18,9.28l6.93 13.67c4.41,6.88 4.57,11.65 6.86,17.48l3.56 8.94c-0.06,7.61 0.23,15.18 0.75,22.72 0.34,4.89 0.43,8.72 0.29,13.64 -0.2,7.48 -0.41,14.97 -0.62,22.45 -1.6,8.03 -0.81,12.54 -1.22,18.81 0.32,3.59 1.97,6.02 1.56,8 -0.24,1.2 -0.65,1.83 -1.07,2.13 -0.9,0.63 -1.07,2.08 -1.08,3.69l1.88 11.98 -9.12 8.83zm257.31 -175.11l0.72 -1.51 -1.86 -1.17 1.14 2.68zm-2.16 205.49l-35.42 285.94 10.42 20.83 262.5 5.73 22.65 -25 -29.42 -294.01 -230.73 6.51zm24.26 30.1l6.87 0.07c-9.41,45.36 -16.75,91 -22.34,136.87l-2.23 -0.6 -13.89 125.81 -2.36 1.23 -0.36 -2.49 13.98 -125.14 -1.97 -0.5c5.42,-44.66 12.71,-89.72 22.3,-135.25zm183.38 0.15l2.58 0.13c7.12,44.25 15.24,87.75 23.67,131.04l1.98 -0.49c8.14,42.71 13.86,85.61 17.66,128.67l-1.57 4.1 -3.68 -2.13c-4.02,-44.23 -10.22,-87.28 -18.75,-129.08l2 -0.57c-8.57,-43.89 -16.8,-87.78 -23.89,-131.67zm-14.52 -0.07l6.99 -0.22c6.56,44.82 14.47,89.08 23.11,133.03l-2.02 0.35c9.05,44.29 15.43,87.57 19.45,129.95l-0.27 3.96 -2.55 -3.22c-4.61,-40.2 -10.89,-83.16 -19.49,-130.3l-2.44 0.63c-8.63,-44.52 -16.41,-89.21 -22.78,-134.18zm-178.89 0.74l2.65 -0.02c-10.01,45.55 -17.23,89.75 -22.55,133.05l1.81 0.37c-5.68,41.05 -9.28,81.83 -13.92,122.75l-2.39 1.22 -2.72 -3.84c4.44,-40.64 8.17,-81.24 13.3,-121.91l1.66 0.48c5.27,-42.98 12.37,-86.87 22.16,-132.1zm-256.73 -70.09c32.59,3.46 66.42,4.72 101.08,4.53l0 4.23c33.68,0.1 67.08,-1.75 100.23,-5.3l4.04 2.41 -4.43 3.45c-31.46,3.87 -64.76,5.81 -99.86,5.85l0.03 4.2c-37.3,0.63 -71.66,-1.49 -103.23,-6.24l-7.48 -6.87 9.62 -6.26zm-5.08 180.07c20.93,12.95 59.72,17.67 106.57,18.68l0.04 3.98c48.46,-0.04 83.51,-6.12 104.69,-18.44l4.85 1.76 -4.3 4.88c-23.21,12.12 -58.77,17.87 -105.18,18.05l0.14 4.06c-48.55,-0.16 -85.62,-5.68 -107.91,-18.12l-6.64 -8.73 7.74 -6.12zm3.04 -26.77c17.49,11.63 51.83,17.71 103.48,18.09l0 4.06c46.58,-0.82 81.54,-6.51 102.27,-18.16l4.26 0.9 -3.36 5.08c-21.72,12.52 -56.89,18.32 -103.2,18.55l0 4.1c-46.75,0.14 -83.78,-5.17 -105.94,-18.79l-5.94 -8.67 8.43 -5.16zm-1.61 -28.06c22.95,14.39 61.3,18.24 104.84,18.55l0 4.2c51.3,-0.9 87.82,-6.95 104.73,-19.82l5.23 1.22 -5.13 5.08c-21.63,14.5 -58.79,19.75 -104.9,19.67l0 4.35c-44.51,-0.5 -81.85,-4.85 -103.18,-17.85l-10.01 -6.35 8.42 -9.05zm2.36 -24.59c19.68,10.76 56.41,14.93 102.39,15.54l0 4.11c48.25,-0.53 81.42,-6.03 101.28,-15.92l4.93 1.85 -3.71 3.18c-17.2,11.43 -52.65,16.78 -102.66,17.28l0 4.2c-47.79,-0.4 -84.4,-5.49 -104.32,-17.61l-6.28 -8.74 8.37 -3.89zm3.76 -23.82c25.53,8.19 59.01,11.67 98.6,11.52l0.03 4.37c43.66,-0.58 77.49,-4.57 98.57,-12.96l6.51 2.57 -6.74 3.45c-23.09,9.36 -57.71,12.79 -98.34,13.12l-0.1 4.46c-43.19,-0.04 -77.3,-4.05 -99.83,-13.12l-7.98 -4.04 9.28 -9.37zm-1.28 -25.83c26.7,6.56 60.68,9.37 99.87,9.51l0 4.26c40.81,-0.25 73.53,-3.81 99.06,-10.31l4.43 2.6 -5.54 3.55c-22.04,6.88 -55.1,10.27 -97.97,10.55l-0.07 4.11c-43.6,-0.21 -77.82,-3.55 -100.06,-10.88l-7.07 -6.77 7.35 -6.62zm-0.4 -25.43c32.44,5.24 65.92,7.32 100.27,6.83l0.06 4.43c37.72,-0.31 71.57,-2.92 100.79,-8.27l5.3 3.22 -5.17 2.54c-28.78,6.29 -62.76,8.98 -101.08,8.67l0.07 4.59c-35.83,0.26 -69.52,-1.73 -99.09,-8.07l-8.63 -7.07 7.48 -6.87z'); var cl1='#282829'; $('#spncl1').css('background-color', cl1); var cl2='#FFF212'; $('#spncl2').css('background-color', cl2); 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(logo1.set({ left: 100, top: 100, scaleX: 15, scaleY: 15, flipY: false, strokeWidth: 0.03, stroke: '#191919', fill: '#FFFFFF' }));canvas.add(logo2.set({ left: 0, top: 0, scaleX: 0, scaleY: 0, flipY: false, strokeWidth: 0, stroke: '', fill: '' }));canvast.add(color3.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl1 }));canvast.add(color4.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl2 }));color1.selectable=false;color2.selectable=false;logo1.selectable=false;logo2.selectable=false;color3.selectable=false;color4.selectable=false; var dbplnumber = "10"; var dbteam = "TEAM"; var dbplayer = "PLAYER"; var dbbtag = "btag.svg"; var dbfront3d = "../virtual3d_images/sonic_front_66.virtual"; var dbback3d = "../virtual3d_images/sonic_back_66.virtual"; var dbtagleft = "275"; var dbtagtop = "425"; 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 */ 223,227 $("#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);color3.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(); }); 224,228 $("#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);color4.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(); }); /*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 = "200"; var dbteamtop = "140"; 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 = "200"; var dbnm1top = "210"; 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 = "50"; var dbnm2stroke = "2"; var dbnm2left = "360"; var dbnm2top = "530"; var dbnm2angle = "12"; 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);canvas.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 = "190"; 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 = "200"; var dbnm3top = "190"; 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 = "0"; var dbnm4stroke = "0"; 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();