// 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('M95.82 17.91l-0.9 -9.77c17.08,5.15 41.4,9.8 59.25,9.93 18.5,0.13 52.16,-4.2 70.2,-8.18l-2.88 9.62 9.74 -2.15 -6.04 21.65c-4.11,14.73 -14,26.92 -25.32,36.85 -11,10.56 -22.7,20.48 -35.27,29.12l-7.63 5.24 -7.64 -5.22c-14.96,-10.22 -28.79,-21.36 -41.77,-34.02l-0.31 -0.31 -0.3 -0.33c-8.72,-9.7 -16.09,-21.27 -18.08,-34.38l-3.2 -21.11 10.15 3.06zm231.19 451.62l44.38 62.19 -29.65 28.04c16.92,4.1 34.17,6.6 51.64,6.53 9.11,-0.03 22.78,-0.77 27.55,-10.13 4.9,-9.62 14.35,-14.31 23.64,-11.51l0.8 -12.87 7.78 4.52c7.01,4.06 14.15,9.8 17.45,17.4 3.8,8.74 22.83,10.89 30.79,11.4 14.95,0.95 30.15,0.02 44.8,-3.14 2.85,-0.61 5.89,-1.31 8.92,-2.13l-29.71 -28.11 44.38 -62.19 12.91 7.8 1.53 88.19 0.67 1.34 -0.64 0.32 0.01 0.63 -12.45 7.81 -1.79 -1.69c-6.49,2.47 -13.48,4.21 -20.03,5.63 -16.28,3.5 -33.14,4.56 -49.74,3.5 -16.4,-1.04 -38.8,-5.25 -46.16,-22.19 -0.75,-1.73 -2.35,-3.45 -4.16,-4.98l-2.12 12.02 -7.23 -5.36c-1.91,-1.41 -2.6,-0.2 -3.61,1.79 -8.42,16.52 -26.56,19.89 -43.52,19.95 -22.8,0.09 -45.21,-3.8 -67.1,-9.96l-1.37 1.29 -4.87 -3.05 -2.78 -0.79 0.23 -0.82 -5.03 -3.15 1.56 -90.48 12.92 -7.8zm221.1 -212.88l-8.17 -39.09 -191.99 3.32 -4.02 36.88 7.4 1.98c10.09,3.02 29.87,5.34 51.71,7.13 6.55,0.54 13.16,0.45 19.78,0.23l0.01 0 0 0c0.49,-0.02 1.03,0.01 1.61,0.07l0.26 0c0.49,-0.03 1.62,-0.05 2.27,-0.12 0.66,-0.08 5.72,0.17 6.65,0.27 0.92,0.09 2.78,-0.32 4.78,-0.05 2,0.27 12.35,-0.17 14.53,-0.2 2.17,-0.02 14.16,-0.41 14.16,-0.41 16.15,-0.19 36.04,-1.59 54.8,-3.79 7.32,-0.86 14.11,-1.61 19.77,-3.91l6.45 -2.31zm-530.94 -78.35c0.08,-3.02 -0.12,-6.14 -0.15,-9.16 -0.1,-11.01 2.33,-22 5.94,-32.35 4.2,-13.8 7.82,-27.77 10.99,-41.84 3.62,-16.06 5.1,-31.96 3.56,-48.39l-1.27 -13.44 26.88 -2.53 1.27 13.44c1.81,19.28 0.15,38.01 -4.1,56.86 -3.33,14.8 -7.16,29.51 -11.58,44.03l-0.08 0.27 -0.1 0.27c-2.6,7.4 -4.58,15.54 -4.51,23.43 0.04,3.77 0.27,7.54 0.1,11.31 -0.18,4.15 -0.73,6.03 -2.52,9.68 -3.16,6.46 -9.54,12.19 -15.26,16.42l-10.85 8.02 -16.06 -21.7 10.86 -8.03c1.73,-1.29 5.59,-4.35 6.88,-6.29zm258.25 -121.87c1.86,20.72 6.65,41.29 11.55,61.46 3.67,15.08 10.14,30.4 11.1,45.95 0.28,4.41 0.55,8.84 0.4,13.26l8.63 1.19 -3.71 26.75 -13.37 -1.85c-11.32,-1.57 -18.96,-9.88 -18.79,-21.33 0.02,-1.54 0.1,-3.06 0.2,-4.59 0.25,-3.85 -0.07,-7.93 -0.31,-11.76 -0.5,-8.11 -3.58,-17.58 -5.92,-25.37 -1.58,-5.26 -3.16,-10.53 -4.46,-15.86 -5.3,-21.8 -10.34,-43.83 -12.28,-66.22 -0.4,-4.56 0.56,-6.61 1.43,-10.22l-3.25 -11.32 25.95 -7.46 3.73 12.97c0.67,2.36 0.9,4.8 0.7,7.24 -0.24,2.9 -1.06,4.69 -1.6,7.16z');color3 = new fabric.Path('M346.23 236.6c19.32,5.85 44.78,9.32 77.02,10.17 -0.05,-0.79 -0.15,-1.67 -0.21,-2.13 -0.09,-0.73 0.13,-3.61 0.17,-4.32 0.05,-0.71 0.07,-3.45 0.07,-3.45 0,0 0.86,-0.51 1.86,-0.39 1,0.12 1.51,0.24 2.37,0.37 0.85,0.12 3.88,0.44 4.32,0.63 0.44,0.2 3.81,-0.05 4.88,0.03 1.08,0.07 6.89,-0.44 8.28,-0.35 1.39,0.1 9.25,0.35 11.43,0.15 2.17,-0.19 7.13,-0.73 8.13,-0.76 1,-0.02 2.31,0.1 2.31,0.1l-0.58 3.2c0.5,2.12 0.59,4.23 0.12,6.35 0.06,0.27 0.1,0.54 0.15,0.81 38.82,-2.69 65.91,-6.26 77.24,-11.04l2.5 11.97c-16.74,5.87 -45.91,8.36 -79.54,9.65 0.2,1.72 0.16,3.63 -0.05,5.67l0.39 3.4c0,0 -11.99,0.39 -14.16,0.41 -2.18,0.03 -12.53,0.47 -14.53,0.2 -2,-0.27 -3.86,0.14 -4.78,0.05 -0.93,-0.1 -5.99,-0.35 -6.65,-0.27 -0.65,0.07 -1.78,0.09 -2.27,0.12 -0.48,0.02 -1.88,-0.07 -1.88,-0.07l0.52 -3.42c0,0 -0.13,-4.17 0.05,-6.15 -27.69,-0.13 -54.1,-2.68 -78.45,-9.07l1.29 -11.86zm154.02 346.46c-16.4,-1.04 -38.8,-5.25 -46.16,-22.19 -0.49,-1.14 -1.36,-2.28 -2.41,-3.36l0.93 -5.25c2.39,1.99 4.52,4.31 5.61,6.82 6.53,15.02 27.91,18.58 42.32,19.49 16.19,1.03 32.63,0.01 48.5,-3.41 5.63,-1.22 11.64,-2.69 17.33,-4.69l-7.45 -7.04c-3.97,1.17 -8,2.12 -11.78,2.93 -15.06,3.25 -30.67,4.21 -46.03,3.23 -10.21,-0.65 -29.88,-3.14 -34.64,-14.1 -2.88,-6.64 -9.46,-11.75 -15.58,-15.3l-3.89 -2.26 -0.17 2.72c-0.66,-0.23 -1.32,-0.43 -1.98,-0.59l0.52 -8.28 7.78 4.52c7.01,4.06 14.15,9.8 17.45,17.4 3.8,8.74 22.83,10.89 30.79,11.4 14.95,0.95 30.15,0.02 44.8,-3.14 2.85,-0.61 5.89,-1.31 8.92,-2.13l-3.85 -3.65c-2.06,0.51 -4.09,0.97 -6.01,1.38 -14.25,3.07 -29.04,3.97 -43.57,3.05 -5.63,-0.36 -24.21,-2.38 -26.95,-8.71 -3.71,-8.54 -11.43,-14.91 -19.32,-19.49l-11.67 -6.78 -0.88 14.01c-10.33,-1.68 -20.54,3.88 -25.94,14.48 -3.73,7.33 -16.64,7.65 -23.55,7.67 -16.12,0.06 -32.06,-2.12 -47.72,-5.73l-3.91 3.7c16.92,4.1 34.17,6.6 51.64,6.53 9.11,-0.03 22.78,-0.77 27.55,-10.13 4.55,-8.93 13.02,-13.62 21.65,-12 0.66,0.13 1.32,0.29 1.99,0.49 0.65,0.2 1.31,0.43 1.97,0.71 1.61,0.67 3.2,1.58 4.76,2.73l-0.49 2.77 -0.88 5.03 -0.94 5.32 -1.18 6.7 -7.23 -5.36c-1.91,-1.41 -2.6,-0.2 -3.61,1.79 -8.42,16.52 -26.56,19.89 -43.52,19.95 -22.8,0.09 -45.21,-3.8 -67.1,-9.96l-1.37 1.29 -4.87 -3.05 -2.78 -0.79 0.23 -0.82 -3.97 -2.49 -1.82 6.41 12.99 3.68c22.42,6.34 45.36,10.32 68.7,10.23 18.28,-0.06 37.17,-3.99 46.72,-20.93l8.56 6.35 1.81 -10.27c8.66,17.75 31.49,22.47 49.42,23.61 17.01,1.09 34.28,0 50.96,-3.59 9.36,-2.02 19.41,-4.68 27.97,-9.02l12.04 -6.11 -6.9 -13.61 0.18 10.3 0.67 1.34 -0.64 0.32 0.01 0.63 -12.45 7.81 -1.79 -1.69c-6.49,2.47 -13.48,4.21 -20.03,5.63 -16.28,3.5 -33.14,4.56 -49.74,3.5zm31.09 -51.92l25.01 23.67 3.75 3.54 3.69 3.49 7.23 6.84 1.35 1.28 7.35 -4.62 -0.16 -9.01 -0.18 -10.3 -1.14 -66.14 -7.22 -4.36 -39.68 55.61zm-82.72 20.57c-1.43,-1.06 -2.89,-1.86 -4.34,-2.41 -0.67,-0.25 -1.33,-0.45 -1.99,-0.6 -6.93,-1.58 -13.65,2.24 -17.35,9.51 -5.74,11.25 -20.35,12.54 -31.54,12.58 -18.81,0.07 -37.36,-2.76 -55.54,-7.35l-7.7 7.28c20.67,5.63 41.8,9.15 63.27,9.07 15.09,-0.05 31.98,-2.68 39.53,-17.5 2.28,-4.48 5.93,-6.59 10.3,-3.35l3.61 2.68 0.37 -2.11 0.89 -5.03 0.49 -2.77zm-83.17 -20.57l-39.68 -55.61 -7.22 4.36 -1.31 75.66 -0.17 9.79 1.76 1.11 5.59 3.51 0.69 -0.66 7.62 -7.21 3.84 -3.63 3.87 -3.66 25.01 -23.66zm-322.72 -434.21c3.83,-16.99 5.37,-33.83 3.74,-51.21l-0.42 -4.48 8.96 -0.85 0.42 4.48c1.72,18.33 0.12,36.12 -3.92,54.04 -3.29,14.59 -7.05,29.08 -11.41,43.39l-0.06 0.18c-2.96,8.42 -5.1,17.53 -5.02,26.49 0.04,3.61 0.27,7.24 0.11,10.84 -0.13,2.9 -0.37,3.57 -1.62,6.12 -2.44,4.99 -8.11,9.87 -12.52,13.13l-3.62 2.68 -5.35 -7.24 3.62 -2.67c3.02,-2.24 8.11,-6.43 9.79,-9.85 0.19,-0.4 0.48,-0.88 0.63,-1.29 0.07,-0.37 0.06,-0.9 0.08,-1.28 0.15,-3.42 -0.08,-6.92 -0.12,-10.35 -0.09,-10.01 2.2,-20.07 5.5,-29.47 4.28,-14.07 7.98,-28.32 11.21,-42.66zm13.17 2.97c4.15,-18.39 5.78,-36.65 4.01,-55.45l-0.85 -8.96 -17.92 1.69 0.85 8.96c1.59,16.9 0.08,33.27 -3.65,49.8 -3.2,14.21 -6.86,28.31 -11.1,42.25 -3.45,9.88 -5.82,20.4 -5.72,30.91 0.04,3.35 0.27,6.78 0.12,10.11 0,0.1 -0.01,0.2 -0.01,0.3 -0.08,0.17 -0.17,0.33 -0.25,0.49 -1.25,2.57 -6.14,6.52 -8.42,8.21l-7.23 5.35 10.7 14.47 7.24 -5.35c5.06,-3.75 11.08,-9.04 13.89,-14.77 1.51,-3.1 1.91,-4.38 2.06,-7.9 0.17,-3.69 -0.06,-7.39 -0.1,-11.08 -0.08,-8.43 1.99,-17.05 4.77,-24.96l0.06 -0.18 0.06 -0.18c4.39,-14.42 8.18,-29.01 11.49,-43.71zm54.81 -32.14c12.79,12.48 26.42,23.45 41.16,33.53l5.1 3.48 5.08 -3.5c12.4,-8.52 23.94,-18.31 34.78,-28.73 10.66,-9.34 20.15,-20.86 24.02,-34.74l4.03 -14.43 -4.87 1.07 -1.48 4.93 -2.01 7.22c-3.64,13.03 -12.73,23.89 -22.74,32.63 -10.68,10.28 -22.05,19.94 -34.28,28.34l-2.54 1.75 -2.55 -1.74c-14.53,-9.93 -27.96,-20.73 -40.56,-33.03l-0.11 -0.1 -0.1 -0.11c-7.48,-8.33 -14.16,-18.44 -15.87,-29.72l-1.07 -7.03 -0.44 -4.84 -5.07 -1.53 2.13 14.08c1.85,12.2 8.87,23.02 16.98,32.04l0.19 0.22 0.22 0.21zm142.23 -10.09c1.92,22.15 6.93,43.98 12.17,65.54 1.28,5.26 2.85,10.45 4.4,15.63 2.46,8.19 5.58,17.86 6.1,26.39 0.26,4.04 0.57,8.28 0.31,12.32 -0.09,1.47 -0.17,2.91 -0.19,4.37 -0.14,9.19 5.85,15.55 14.91,16.81l8.91 1.23 2.47 -17.83 -8.26 -1.14c0.03,-0.76 0.08,-1.52 0.13,-2.28 0.31,-4.85 -0.01,-9.75 -0.31,-14.59 -0.93,-15.08 -7.4,-30.47 -10.98,-45.16 -5.02,-20.64 -9.89,-41.65 -11.72,-62.84 0.02,-0.35 0.32,-1.21 0.45,-1.64 0.56,-1.87 1.04,-3.61 1.2,-5.57 0.16,-1.9 -0.01,-3.8 -0.54,-5.63l-2.48 -8.65 -17.3 4.97 2.34 8.14c-0.15,0.71 -0.51,1.7 -0.69,2.32 -0.73,2.52 -1.15,4.97 -0.92,7.61zm16.55 64.48c-5.19,-21.33 -10.17,-42.95 -12.06,-64.87 -0.37,-4.18 1.38,-6.15 1.65,-9.47 0.02,-0.27 0.01,-0.54 -0.06,-0.8l-1.25 -4.33 8.65 -2.49 1.25 4.33c0.38,1.32 0.49,2.66 0.38,4.02 -0.2,2.42 -1.82,6.06 -1.66,7.97 1.86,21.43 6.76,42.65 11.84,63.51 3.48,14.29 9.95,29.79 10.86,44.38 0.29,4.64 0.6,9.37 0.3,14.02 -0.08,1.24 -0.14,2.46 -0.16,3.7 -0.04,2.3 1,2.92 3.26,3.24l4.46 0.61 -1.24 8.92 -4.45 -0.62c-6.8,-0.94 -11.13,-5.36 -11.03,-12.28 0.02,-1.39 0.09,-2.76 0.18,-4.15 0.28,-4.25 -0.04,-8.65 -0.3,-12.89 -0.85,-13.6 -7.35,-29.33 -10.62,-42.8z');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('M396.99 262.4l3.28 0.77c0,0 0.79,-0.07 1.06,-0.34 0.28,-0.28 0.85,-0.46 1.34,-0.47 0.49,-0.02 0.47,0.01 1.23,-0.14 0.77,-0.14 1.49,-0.43 2.15,-0.32 0.67,0.11 2.02,0.21 2.9,-0.02 0.88,-0.22 1.37,-0.49 2.02,-0.37 0.65,0.11 1.24,0.26 1.61,0.26 0.37,0 2.69,0.02 3.21,-0.05 0.52,-0.06 1.81,-0.31 2.9,-0.7 1.09,-0.39 1.67,-0.21 2.53,-0.13 0.87,0.08 2.2,-0.16 2.5,-0.34 0.29,-0.18 1.33,0.16 2.52,-0.07 1.19,-0.22 2.72,-0.53 3.61,-0.45 0.9,0.08 2.1,-0.21 2.84,-0.41 0.73,-0.19 1.04,-0.26 1.67,-0.18 0.64,0.08 3.62,0.03 4.12,0.03 0.51,0 4.14,-0.14 4.79,-0.3 0.65,-0.17 2.88,-0.77 3.95,-0.62 1.08,0.14 4.69,0.39 5.83,0.39 1.14,0 5.26,-0.13 6.46,-0.38 1.21,-0.24 2.15,-0.53 3.5,-0.24 1.35,0.29 4.77,0.78 7.64,0.37 2.86,-0.4 3.01,-0.42 4.96,-0.24 1.96,0.18 6.04,0.21 7.67,0.19 1.63,-0.01 5.57,-0.04 7.47,-0.04 1.91,0 6.47,0.04 7.02,-0.05 0.55,-0.1 1.17,-0.49 2.57,-0.23 1.4,0.26 6.38,0.42 8.68,0.44 2.29,0.01 10.3,0.38 12.16,0.64 1.86,0.26 5.99,1.11 6.76,1.34 0.76,0.22 1.64,1.07 2.06,1.2 0.43,0.13 0.65,-0.15 1.01,-0.2 0.36,-0.04 0.83,-0.09 0.83,-0.09l11.87 -3.16 -1.43 -30.6 -143.1 -5.34 -2.19 39.85zm70.02 212.41l-40.6 56.91 35.29 33.38 -32.02 1 -41.16 -1.78 -0.78 17.99 41.83 1.8 40.34 -1.26 89.17 -1.38 -0.28 -18 -86.16 1.34 34.98 -33.09 -40.61 -56.91zm-386.29 -438.47c3.24,21.06 3.96,42 1.22,63.16 -1.84,14.18 -5,28.12 -9.88,41.56 -3.5,9.62 -4.33,20.35 -6.28,30.38 -2.68,13.84 -10.05,28.76 -22.06,36.78l-11.22 7.5 -15 -22.45 11.22 -7.5c5.66,-3.78 9.32,-13.09 10.56,-19.47 2.29,-11.84 3.21,-22.93 7.4,-34.46 4.21,-11.58 6.9,-23.6 8.48,-35.8 2.42,-18.64 1.73,-37.05 -1.12,-55.59l-2.05 -13.35 26.68 -4.1 2.05 13.34zm226.84 71.97c3.79,16.95 10.04,32.8 12.99,50.17 0.58,3.43 0.94,6.75 2.06,10.06 1.82,5.4 5.45,14.44 10.64,17.53l11.59 6.93 -13.84 23.18 -11.59 -6.93c-11.63,-6.94 -18.18,-19.65 -22.38,-32.07 -1.66,-4.92 -2.25,-9.16 -3.1,-14.18 -2.87,-16.92 -9.24,-32.91 -12.91,-49.65l-0.17 -0.75 -0.07 -0.76c-2.55,-24.69 -1.66,-50.07 -0.55,-74.84l0.61 -13.49 26.97 1.22 -0.61 13.48c-1.04,23.12 -1.94,47.03 0.36,70.1zm-196.48 -100.91c20.68,6.91 46.73,11.99 68.44,11.67 16.73,-0.24 49.71,-2.89 64.04,-12.25l11.3 -7.39 14.77 22.61 -11.31 7.38c-19.65,12.84 -55.43,16.32 -78.41,16.65 -24.78,0.36 -53.8,-5.18 -77.39,-13.07l-12.8 -4.28 8.56 -25.6 12.8 4.28z');color6 = new fabric.Path('M405.99 241.69c28.45,-4.02 59.35,-4.98 92.35,-3.59 16.01,0.68 28.55,3.73 42.81,5.19l0.45 11.12c-12.12,-3.65 -38.47,-6.28 -78.71,-5.47 -19.18,0.39 -38.15,1.82 -57.45,3.61 -1.6,2.03 -1.66,4.08 -0.56,6.16l0 0.76c-0.22,0.7 -1.48,1.29 -0.71,2.3l0.32 0.53c-0.55,0.11 -1,0.15 -1.59,0.35l-0.81 -0.1c-0.5,-0.07 -0.63,0.14 -0.88,0.33 -0.28,0.21 -0.58,0.09 -0.87,0.14l-5.2 1.61c0,0 -5.4,-1.23 -6.12,-2.28 -0.71,-1.04 -2.86,-7.35 -2.86,-7.35l4.68 -15.89 3.26 -10.42c8.45,-0.84 7.27,-1.42 14.04,0.45l-0.77 1.59c-1.37,0.19 -0.46,1.58 -0.44,2.35l-0.01 0.92c-1.49,2.27 -1.67,4.35 -0.47,6.24l-0.04 0.59c-0.15,0.29 -0.29,0.57 -0.42,0.86zm23.66 328.91l-36.83 -1.59 -0.39 8.99 37.17 1.61 40.17 -1.25 84.74 -1.32 -0.14 -9 -84.81 1.32 -1.79 0.05 -0.76 0.72 -0.71 -0.67 -36.65 1.14zm0.06 -9l-45.49 -1.97 -1.17 26.98 46.49 2.01 40.51 -1.27 93.6 -1.45 -0.42 -27 -85.75 1.33 -4.84 4.58 86.16 -1.34 0.28 18 -89.17 1.38 -40.34 1.26 -41.83 -1.8 0.78 -17.99 41.16 1.78 32.02 -1 -4.61 -4.36 -27.38 0.86zm-352.23 -462.67c2.68,-20.75 1.97,-41.27 -1.2,-61.9l-1.37 -8.9 -17.79 2.74 1.36 8.89c2.92,18.96 3.61,37.8 1.15,56.86 -1.63,12.53 -4.4,24.87 -8.72,36.75 -4.08,11.23 -4.98,22.24 -7.22,33.79 -1.48,7.66 -5.72,17.84 -12.47,22.35l-7.48 5 10 14.97 7.48 -5c10.97,-7.33 17.7,-21.27 20.15,-33.9 2,-10.34 2.84,-21.1 6.46,-31.06 4.77,-13.13 7.86,-26.75 9.65,-40.59zm-5.65 -61.22c3.11,20.22 3.81,40.32 1.18,60.64 -1.75,13.51 -4.76,26.82 -9.41,39.63 -3.74,10.28 -4.59,21.1 -6.65,31.75 -2.21,11.4 -8.29,24.37 -18.23,31.01l-3.74 2.5 -5 -7.49 3.74 -2.5c7.83,-5.23 12.66,-16.31 14.39,-25.24 2.18,-11.25 3.06,-22.19 7.03,-33.1 4.43,-12.2 7.28,-24.86 8.95,-37.72 2.52,-19.48 1.82,-38.73 -1.16,-58.11l-0.68 -4.45 8.89 -1.37 0.69 4.45zm360.52 493.43l31.08 29.41 3.58 3.39 3.81 -3.6 30.86 -29.2 -34.67 -48.58 -34.66 48.58zm-168.95 -510.41l-9.84 -15.07 -7.54 4.92c-15.25,9.96 -48.63,12.73 -66.43,12.99 -22.23,0.32 -48.77,-4.83 -69.94,-11.91l-8.53 -2.85 -5.71 17.07 8.54 2.86c23.1,7.72 51.63,13.18 75.9,12.83 21.96,-0.32 57.22,-3.64 76.01,-15.92l7.54 -4.92zm-14.92 -6.38l3.77 -2.46 4.92 7.53 -3.77 2.47c-17.92,11.7 -52.68,14.88 -73.62,15.18 -23.76,0.34 -51.79,-5.04 -74.41,-12.6l-4.27 -1.43 2.86 -8.53 4.27 1.42c21.65,7.24 48.69,12.47 71.42,12.14 18.86,-0.27 52.68,-3.17 68.83,-13.72zm40.94 18.56l8.99 0.4 -0.2 4.5c-1.06,23.76 -1.97,48.24 0.44,71.93 3.76,16.98 10.09,32.94 13.03,50.25 0.67,3.99 1.1,7.56 2.4,11.43 2.67,7.88 7.09,17.92 14.56,22.38l3.86 2.31 -4.62 7.73 -3.86 -2.31c-9.59,-5.73 -15.02,-17.03 -18.46,-27.23 -1.49,-4.4 -1.99,-8.29 -2.76,-12.81 -2.91,-17.15 -9.28,-33.16 -12.99,-50.07l-0.06 -0.25 -0.02 -0.25c-2.5,-24.23 -1.6,-49.21 -0.51,-73.52l0.2 -4.49zm13.69 76.12c-2.36,-23.38 -1.46,-47.58 -0.4,-71.02l0.4 -8.99 -17.98 -0.81 -0.4 8.99c-1.11,24.54 -2,49.72 0.52,74.18l0.05 0.51 0.11 0.5c3.69,16.82 10.07,32.82 12.96,49.86 0.81,4.77 1.35,8.83 2.92,13.49 3.83,11.32 9.81,23.31 20.42,29.65l7.73 4.62 9.23 -15.46 -7.73 -4.61c-6.35,-3.8 -10.34,-13.29 -12.59,-19.96 -1.22,-3.59 -1.61,-7.03 -2.24,-10.74 -2.94,-17.34 -9.23,-33.25 -13,-50.21z'); var cl1='#282829'; $('#spncl1').css('background-color', cl1); var cl2='#FFFFFF'; $('#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: 80, top: 90, scaleX: 15, scaleY: 15, flipY: false, strokeWidth: 0.03, stroke: '#191919', fill: '#FFFFFF' }));canvas.add(logo2.set({ left: 437, top: 250, 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 = "21"; var dbteam = "TEAM"; var dbplayer = "PLAYER"; var dbbtag = "btag.svg"; var dbfront3d = "../virtual3d_images/rect_front_171.virtual"; var dbback3d = "../virtual3d_images/rect_back_171.virtual"; var dbtagleft = "210"; var dbtagtop = "475"; var dbtagsize = "45"; 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 */ 1071,1076 $("#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(); }); 1072,1077 $("#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(); }); 1073,1078 $("#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 = "150"; var dbteamtop = "185"; 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 = "50"; var dbnm1stroke = "2"; var dbnm1left = "155"; var dbnm1top = "250"; 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 = "500"; var dbnm2top = "520"; 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);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 = "175"; var dbplayertop = "130"; 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 = "180"; var dbnm3top = "250"; 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 = "50"; var dbnm4stroke = "2"; var dbnm4left = "400"; 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();