// 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('M198.59 464.29l2.43 3.38 0.16 -0.16c1.58,-2.12 2.51,-4.54 3.19,-7.34 0.9,-3.68 -3.34,-7.58 -4.74,-11.48 -2.16,-5.98 -4.81,-11.78 -7.21,-17.66 -2.02,-2.94 -0.65,-3.92 -0.2,-5.88 0.46,-1.97 0.18,-4.57 -0.97,-7.85 -1.48,-4.22 -3.46,-8.71 -6.02,-13.36 1.56,-3.45 2.62,-8.25 1.91,-15.01 -0.47,-4.43 -2.8,-9.21 -5.84,-14.33 -0.04,-6.95 -1.97,-14.17 -3.3,-21.19 -0.57,-3.05 -1.6,-5.99 -2.41,-8.98 -3.43,-7.15 -5.5,-13.59 -6.95,-19.7 -1.07,-2.74 -0.8,-3.59 2.74,-5.6 0.89,-0.75 0.6,-2.42 0.2,-3.66l-2.23 -7.02 -0.37 -0.69 -0.09 -4.64 87.25 -62.58 -2.38 13.81c-0.26,2.93 1.29,4.92 4.72,5.06 3.31,0.14 6.18,-1.75 5.79,-5.04l-1.67 -14.17c-0.09,-0.32 -0.42,-0.47 -1,-0.46l0.05 -3.15 74.56 -53.47 -0.1 16.08 0.05 31.69c-1.46,0.08 -1.27,1.32 -1.36,2.06 -0.62,5.02 -4.03,10.6 -1.9,15.1 1.48,3.15 7.08,3.27 9.51,0.38 1.88,-2.26 -0.57,-10.31 -0.85,-15.46 -0.03,-1.18 -0.39,-1.88 -1.09,-2.09l0.23 -31.67 0.04 -19.34 68.78 -49.33 -0.22 -0.17c-5.56,-4.63 -10.95,-8.54 -16.19,-11.87 -4.88,-2.99 -11.4,-6.37 -17.71,-9.62 6.2,-3.13 12.16,-6.45 17.73,-9.92 2.46,-1.52 6.22,-4.17 6.74,-4.03l1.01 0.49 10.13 -2.7 -3.44 -10.51 -8.84 -5.51 2.43 -3.35 75.78 55.47 42.19 116.02 9.37 70.7 -35.94 119.14 -35.35 65.24 -9.25 -6.35 1.24 -3.03 0.86 -4.49 1.33 -3.1 -0.94 -4.46 -5.85 -9.42 -9 -7.42 -9.41 -6.6 -12.64 -4.46 -5.44 -0.35 -3.74 7.27 -2.88 3.53 -8.49 11.51 -5.35 5.78 0.67 5.54 11.61 13.65 6.28 6.73 8.09 7.35c-6.22,-0.26 -9,2.67 -13.49,4.01 -3.59,1.53 -11.67,1.97 -23.15,2.57 -8.44,0.44 -17.18,-3.51 -26.21,-3.26 -7.72,-0.66 -16.15,0.44 -25.94,3.19 -9.35,2.63 -20.3,0.59 -30.73,1.24 -12.95,0.8 -18.76,-2.89 -28.2,-3.91 -10.65,-1.14 -20.43,-0.51 -28.9,1.83 -4.67,1.29 -11.8,1.84 -21.62,0.75 -5.09,-0.57 -10.64,-0.43 -15.87,-1.55 -2.5,-0.53 -4.72,-2.11 -7.37,-3.19 2.37,-1.79 4.51,-3.72 6.5,-5.76 0.74,-0.49 0.58,-0.92 0.92,-1.37l8.68 -8.64c2.58,-2.56 4.75,-5.08 5.97,-7.56 1.45,-2.93 0.44,-4.56 -1.97,-6.25 -2.02,-1.58 -3.19,-3.89 -4.72,-6.02l-9.61 -13.39zm101.36 -346.96c0.68,-0.98 1.75,-1.9 3.69,-2.67 2.45,-3.55 10.56,-5.56 16.04,-8.8 11.04,-4.98 19.57,-10.22 25.49,-15.72 7.16,-5.37 15.49,-15.23 19.88,-25.98 3.83,-9.04 4.67,-18.75 1.05,-26.53 -3,-6.45 -10.78,-11.59 -22.89,-15.53 -9.2,-2.92 -21.8,-4.65 -39.42,-4.62 -14.13,-1.08 -26.95,-0.34 -37.08,4.13 -14.52,5.04 -24.66,12.58 -29.1,23.34 -3.15,7.57 -3.41,15.13 -0.66,22.7 4.91,11.23 14.34,21.13 28.1,29.75 7.96,5.09 16.98,9.5 26.59,13.55 2.57,1.18 3.31,2.78 4.93,3.9 1.27,0.52 2.25,1.66 3.38,2.48z');color3 = new fabric.Path('M166.2 284.34l76.56 -63.47 -18.73 26.84 33.33 -24.12 -0.32 16.01c-0.24,-0.04 -0.69,-0.08 -0.76,0.16l-0.14 0.78 -87.25 62.58 -0.07 -3.88 -2.22 -12.95 -0.4 -1.95zm95.69 -64.03l74.52 -53.92 -0.11 3.56 -0.09 13.17 -74.56 53.47 0.24 -16.28zm79.02 -57.18l46.58 -33.7 -46.19 16.95 0.27 -6.42 42.67 -26.47c3.23,1.73 6.28,3.42 8.87,5.01 5.24,3.33 10.63,7.24 16.19,11.87l0.22 0.17 -68.78 49.33 0.02 -9.89 0.15 -6.85zm-3.94 -15.16l-20.35 7.47 20.49 -12.72 -0.13 5.16 -0.01 0.09zm95.1 103.02l-148.24 108.49 128.25 -74.24 -11.73 19.42 -174.07 130.71 206.86 -124.94 0.56 -6.21 -2.06 -27.58 0.15 -8.79 -79.02 45.18 79.16 -53.77 0.14 -8.27zm-60.39 7.29l-179.26 165.49c0.1,-1.75 -0.27,-3.9 -1.17,-6.47 -1.48,-4.22 -3.46,-8.71 -6.02,-13.36 1.28,-2.84 2.23,-6.58 2.13,-11.58l184.32 -134.08zm-137.51 78.35l199.13 -123.83c0.25,-3.77 0.52,-7.54 0.77,-11.31l-199.9 135.14zm145.98 -225.29l-38.26 20.9 0.42 -9.88c5.54,-1.34 11.95,-3.78 18.85,-6.86 4.87,-2.09 9.62,-4.3 14.24,-6.62 1.58,0.81 3.17,1.63 4.75,2.46zm-42.82 23.39l-75.22 41.1 0.02 -2.25 70.37 -49.52c1.67,-0.15 3.4,-0.42 5.14,-0.82l-0.31 11.49zm-79.65 43.52l-9.79 5.35 9.81 -6.91 -0.02 1.56z');color4 = new fabric.Path('M170.95 313.48l83.67 -64.15 -0.86 5.02c-0.26,2.93 1.29,4.92 4.72,5.06 3.31,0.14 6.18,-1.75 5.79,-5.04l-1.35 -11.41 73.27 -56.17 -0.08 12.41 0.04 29.55 -165.17 104.27c-0.94,-2.85 -1.7,-5.6 -2.34,-8.29 -1.07,-2.74 -0.8,-3.59 2.74,-5.6 0.89,-0.75 0.6,-2.42 0.2,-3.66l-0.63 -1.99zm169.78 -130.18l68.8 -52.75c5.97,4.64 11.06,10.22 15.44,16.57l0.89 1.17 -43.51 27.72 47.21 -22.87 4.3 5.65c1.78,2.03 3.14,4.01 3.78,5.9l-97.13 61.31 0.19 -26.79 0.03 -15.91z');color5 = new fabric.Path('M215.03 281.1l40.57 -22.45c-1.4,-0.86 -2.01,-2.38 -1.84,-4.3l0.49 -2.88 -39.22 29.63zm49.18 -27.22l0.57 -0.31 -0.55 0.46 0.04 0.34c0.39,3.29 -2.48,5.18 -5.79,5.04 -0.2,-0.01 -0.4,-0.02 -0.6,-0.04l-62.93 52.95 141.19 -93.28 -0.02 -10.44 -36.86 18.68 36.85 -23.97 0 -4.11 0.03 -5.28 -32.22 19.97 32.24 -22.81 0.01 -1.51 -73.03 55.19 1.07 9.12zm76.37 -37.77l63.57 -41.99 -63.5 32.18 -0.07 9.81zm0.11 -15.78l83.51 -54.31c-1.11,-1.56 -2.27,-3.06 -3.47,-4.52l-80.01 49.59 -0.02 8.12 -0.01 1.12zm0.03 -12.48l74.29 -52.55c-1.03,-1 -2.09,-1.96 -3.19,-2.89l-71.09 53.72 -0.01 1.72z');color6 = new fabric.Path('M317.6 302.8l-126.91 112.94c-1.41,-3.75 -3.21,-7.72 -5.46,-11.8 0.12,-0.25 0.22,-0.51 0.33,-0.77l132.04 -100.37zm-141.15 44.64l155.78 -103.37 0 0.06 -0.01 0.07 0 0.06 0 0.01 0 0.06 -0.01 0.06 0 0.07 0 0.04 0 0.02 0 0.01c0,0.17 0,0.34 0,0.51l0 0.06 0.01 0.06 0 0.03 0 0.04 0 0.06 0.01 0.06 0 0.07c0.02,0.21 0.04,0.42 0.07,0.63l0.01 0.04 0 0.02 0.01 0.06 0.01 0.06 0.01 0.07 0 0.02 0.01 0.04 0.01 0.06 0.03 0.11 0 0.01 0 0 0.01 0.06 0.02 0.07 0.01 0.06 0.01 0.03 0.01 0.03 0.01 0.06 0.02 0.06 0.02 0.06 0 0.01 0.01 0.05 0.02 0.06 0.02 0.07 0.01 0.04 0.01 0.02 0.02 0.06 0.02 0.06 0.02 0.06 0.01 0.01 0.08 0.22 0 0.01 0.05 0.12 0.02 0.06 0.01 0.02 0.02 0.03 0.02 0.06 0.03 0.06 0.03 0.06 0.05 0.1 0.02 0.05 0.03 0.05 0.05 0.09 0.01 0.01 0.05 0.09 0.02 0.03 0.05 0.07 0.04 0.07 0.1 0.12 0.05 0.07 0.05 0.06 0.03 0.03 0.07 0.08 0 0.01 0.07 0.07 0.04 0.04 0.04 0.04 0.08 0.07 0 0 0.09 0.08 0.03 0.02 0.05 0.05 0.07 0.06 0.02 0.01 0.08 0.06 0.03 0.02 0.07 0.05 0.06 0.04 0.03 0.02 0.09 0.06 0.02 0.01 0.08 0.05 0.06 0.04 0.04 0.02 0.1 0.05 0 0 0.1 0.05 0.05 0.03 0.05 0.02 0.1 0.05 0.01 0 0.1 0.05 0.04 0.01 0.07 0.03 0.08 0.03 0.03 0.01 0.11 0.04 0.02 0.01 0.09 0.03 0.11 0.04 0.11 0.03 0.02 0 0.1 0.03 0.06 0.02 0.05 0.01 0.12 0.02 0 0 0.12 0.03 0.05 0.01 0.06 0.01 0.11 0.02 0.01 0 0.12 0.02 0.24 0.03 0.13 0.01 0.02 0 0.1 0.01 0.07 0.01 0.05 0 0.12 0 0.01 0 0.12 0.01 0.06 0 0.06 0 0.12 0 0 0 0.13 -0.01 0.04 0 0.08 0 0.1 -0.01 0.03 0 0.12 -0.01 0.03 0 0.09 -0.01 0.09 -0.01 0.04 0 0.12 -0.02 0.02 0 0.1 -0.02 0.07 -0.01 0.06 -0.01 0.12 -0.02 0 0 0.12 -0.03 0.06 -0.01 0.06 -0.01 0.11 -0.03 0.01 0 0.13 -0.03 0.04 -0.01 0.08 -0.03 -161.71 102.19c-0.37,-1.68 -0.86,-3.33 -1.35,-4.98zm165.67 -109.94l94.12 -62.46c-0.05,0.74 -0.08,1.48 -0.13,2.23 -0.55,4.01 -0.98,8.26 -1.32,12.75l-92.34 58.36c0.06,-0.08 0.11,-0.17 0.17,-0.26l0 0c0.08,-0.16 0.16,-0.33 0.22,-0.52l0.04 -0.11 0 0 0.03 -0.12 0.06 -0.25 0.02 -0.13c0.15,-0.83 0.15,-1.87 0.06,-3.03l-0.01 -0.06 -0.01 -0.12 -0.01 -0.13 -0.01 -0.06 -0.06 -0.57 -0.01 -0.15 -0.01 -0.04 -0.02 -0.19 -0.01 -0.04 -0.02 -0.16 -0.01 -0.11 -0.01 -0.09 -0.09 -0.6 -0.01 -0.13 -0.01 -0.07 -0.06 -0.4 -0.02 -0.09 -0.02 -0.12 -0.02 -0.16 -0.01 -0.04 -0.03 -0.21 0 -0.04 -0.03 -0.17 -0.02 -0.11 -0.01 -0.09 -0.04 -0.2 0 -0.01 -0.03 -0.21 -0.01 -0.06 -0.03 -0.15 -0.02 -0.14 -0.01 -0.07 -0.1 -0.62 -0.03 -0.17 -0.01 -0.04 -0.03 -0.21 -0.01 -0.04 -0.02 -0.17 -0.02 -0.11 -0.02 -0.1 -0.03 -0.19 0 -0.02zm-6.63 -91.23l1.55 -0.63 0 -0.26 -1.55 0.89zm5.91 -2.41l55.73 -22.71c-1.35,-0.92 -2.69,-1.8 -4.02,-2.65 -1.41,-0.86 -2.96,-1.76 -4.61,-2.68l-47.06 27.03 -0.04 1.01zm-36.16 236.77l128.45 -76.26 0.01 -0.15 -0.81 -10.91 -127.65 87.32z');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>');color7 = 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');color8 = new fabric.Path('M161.27 520.99l9.97 -14.83c1.41,1.37 3.25,2.66 6.98,3.1 0.42,0.05 0.7,0.65 1.13,0.76 0.75,1.26 0.78,3.26 1.72,4.72 1.35,2.07 2.79,3.74 4.89,4.83 4.34,2.24 9.16,1.4 12.75,3.44 5.31,3.02 8.71,5.32 16.09,5.64 10.68,1.2 18.45,2.49 31.37,3 10.37,0.99 18.58,-0.66 25.83,-2.32 11.34,-1.17 39.47,-1.51 47.66,-0.14 14.25,4.08 25.46,1.63 38.19,2.44 10.82,0.24 18.48,-2.74 27.64,-3.22 4.8,-0.1 9.4,-1.19 12.47,-2.84 2.45,-1.32 3.62,-3.17 4.79,-4.39 3.26,-3.41 8.45,-2.22 12.67,-3.32 4.24,-0.77 5.6,-3.75 8.08,-7.03l1.82 -4.1c0.2,-0.67 2.75,-0.91 4.64,-2.46l2.65 4.62 2.03 5.79 11.77 -8.43 1.79 -56.8 -7.59 -5.69 -0.06 -36.66c-0.31,-23.06 -1.02,-46.13 -1.53,-69.2l0 -0.18 -0.01 -0.17 0 -0.18 0 -0.18 0 -0.09 -0.01 -0.08 0 -0.18 0 -0.17 -0.01 -0.18 0 -0.18 0 0 0 -0.17 -0.01 -0.18 0 -0.18 0 -0.17 -0.01 -0.1 0 -0.08 0 -0.18 -0.01 -0.17 0 -0.18 0 -0.17 0 -0.02 -0.01 -0.16 0 -0.18 0 -0.17 -0.01 -0.18 0 -0.1 0 -0.08 0 -0.17 0 -0.18 -0.01 -0.18 0 -0.17 0 -0.02 0 -0.16 -0.01 -0.18 0 -0.17 0 -0.18 0 -0.11 -0.01 -0.07 0 -0.18 0 -0.17 0 -0.18 -0.01 -0.18 0 -0.02 0 -0.15 0 -0.18 -0.01 -0.18 0 -0.17 0 -0.12 0 -0.06 0 -0.18 -0.01 -0.18 0 -0.17 0 -0.18 0 -0.03 0 -0.15 -0.01 -0.17 0 -0.18 0 -0.18 0 -0.12 0 -0.06 -0.01 -0.17 0 -0.18 0 -0.18 0 -0.18 0 -0.03 -0.01 -0.14 0 -0.18 0 -0.18 0 -0.18 -0.01 -0.12 0 -0.05 0 -0.18 0 -0.18 0 -0.17 0 -0.18 0 -0.04 -0.01 -0.14 -269.13 -193.03c-0.47,0.46 2.58,-2.41 3.28,-3.01 7.36,-6.5 15.41,-12.16 24.34,-17.62 -2.39,-4.01 -4.19,-7.92 -5.38,-11.73l-4.42 -8.83 15.51 -12.36 -49.24 6.97 -53.64 46.35 -41.15 141.15 20.31 84.37 55.21 82.82 13.23 -6.54 13.52 85.87z');color9 = new fabric.Path('M316.36 176.42c-2,0.79 -4.24,1.47 -6.7,2.06l43.08 23.54 -36.38 -25.6zm-159.24 103.15c0.66,7.41 1.46,14.81 1.89,22.24 0.18,2.96 0.32,5.9 0.41,8.86 0.35,4.62 0.69,9.27 0.97,13.89l213.96 129.23 -174.06 -130.71 -11.74 -19.42 128.25 74.24 -161.31 -118.05c0.27,3.13 0.47,6.23 0.72,9.35l91.65 62.25 -90.74 -51.88zm71.83 -2.86l218.34 201.56 0.91 -28.77 -7.59 -5.69 -0.02 -13.15 -211.64 -153.95zm137.51 78.34l-214.39 -133.33c-0.07,-0.7 -0.14,-1.4 -0.23,-2.11 -0.38,-3.16 -1.05,-6.24 -2.14,-9.24 -0.29,-0.81 -0.9,-1.94 -1.29,-2.73l218.05 147.41zm-120.15 -195.03c-2.8,-1.81 -5.69,-3.75 -8.67,-5.82 -12.7,-9.8 -23.01,-19.2 -30.73,-28.17l-15.28 -9.48c-1.6,1.05 -3.19,2.12 -4.77,3.21 -6.06,4.26 -11.75,8.69 -17.16,13.84l269.13 193.03c-0.07,-6.77 -0.09,-13.53 -0.09,-20.3l-80.87 -67.03 18.74 26.83 -163.47 -118.28 33.17 12.17zm-44.63 -40.53c-1.62,-2.21 -3.07,-4.38 -4.36,-6.53 -1.19,0.74 -2.36,1.47 -3.54,2.21l7.9 4.32z');color10 = new fabric.Path('M439.05 339.09l-268.75 -206.07c-2.02,1.96 -3.88,3.92 -5.71,6.1 -1.65,1.99 -3.19,4.03 -4.66,6.17 -0.83,1.19 -1.62,2.42 -2.38,3.66 -1,1.62 -1.96,3.28 -2.86,4.97l63.59 40.51 -67.38 -32.64 -0.01 0.02c-0.7,1.4 -1.35,2.87 -1.95,4.32 -0.87,2.15 -1.68,4.4 -2.31,6.65l292.86 184.86c-0.16,-6.18 -0.31,-12.37 -0.44,-18.55z');color11 = new fabric.Path('M385.6 299.52l-49.74 -27.53 69.83 58.75 -209.2 -138.2 104.88 53.16 -145.2 -94.44c0.49,-0.86 1.01,-1.72 1.53,-2.56 0.37,-0.6 0.75,-1.22 1.15,-1.81l0.01 -0.01 137.85 85.43 -131.97 -93.37c0.39,-0.46 0.79,-0.92 1.19,-1.37 0.71,-0.81 1.44,-1.6 2.18,-2.37l217.49 164.32z');color12 = new fabric.Path('M295.4 399.05l-135.41 -80.38 0 -0.07 -0.01 -0.06 -0.01 -0.12 0 -0.13 -0.01 -0.12 -0.01 -0.13 -0.01 -0.1 0 -0.02 -0.01 -0.13 -0.01 -0.12 -0.01 -0.12 0 -0.13 -0.01 -0.12 0 -0.02 -0.01 -0.11 -0.01 -0.12 -0.01 -0.13 -0.01 -0.12 -0.01 -0.13 0 -0.05 -0.01 -0.07 0 -0.13 -0.01 -0.12 -0.01 -0.12 -0.01 -0.13 -0.01 -0.09 0 -0.04 -0.01 -0.12 -0.01 -0.12 -0.01 -0.13 0 -0.12 -0.01 -0.13 0 0 -0.01 -0.12 -0.01 -0.13 -0.01 -0.12 -0.01 -0.13 -0.01 -0.12 0 -0.04 -0.01 -0.09 -0.01 -0.12 0 -0.13 -0.01 -0.12 -0.01 -0.13 -0.01 -0.07 0 -0.05 -0.01 -0.13 -0.01 -0.12 -0.01 -0.13 -0.01 -0.12 -0.01 -0.11 0 -0.02 -0.01 -0.12 0 -0.13 -0.01 -0.12 -0.01 -0.13 -0.01 -0.12 0 -0.02 -0.01 -0.11 -0.01 -0.12 -0.01 -0.13 -0.01 -0.13 -0.01 -0.12 0 -0.05 -0.01 -0.08 -0.01 -0.12 -0.01 -0.13 0 -0.12 -0.01 -0.13 -0.01 -0.09 0 -0.03 -0.01 -0.13 -0.01 -0.12 -0.01 -0.13 -0.01 -0.12 -0.01 -0.13 0 -0.08 0 -0.07 -0.01 -0.08 0 -0.07 0 -0.08 0 -0.07 -0.01 -0.08 0 -0.07 0 -0.08 0 -0.01 0 -0.06 -0.01 -0.08 0 -0.07 0 -0.08 0 -0.07 0 -0.08 -0.01 -0.07 0 -0.08 0 -0.07 0 -0.04 -0.01 -0.04 0 -0.07 0 -0.07 0 -0.08 -0.01 -0.07 0 -0.08 0 -0.07 0 -0.08 -0.01 -0.07 0 -0.06 0 -0.02 0 -0.07 -0.01 -0.08 0 -0.07 0 -0.07 0 -0.08 -0.01 -0.07 0 -0.08 0 -0.07 -0.01 -0.07 0 -0.01 0 -0.07 0 -0.07 -0.01 -0.08 0 -0.07 0 -0.08 0 -0.07 -0.01 -0.07 0 -0.08 0 -0.07 0 -0.02 -0.01 -0.06 0 -0.07 0 -0.07 -0.01 -0.08 0 -0.07 0 -0.08 -0.01 -0.07 0 -0.07 0 -0.08 0 -0.03 -0.01 -0.04 0 -0.07 0 -0.08 -0.01 -0.07 0 -0.08 0 -0.07 -0.01 -0.07 0 -0.08 0 -0.07 136.16 93.14zm-59.71 -246.36l-59.98 -24.45c1.33,-1.13 2.7,-2.21 4.07,-3.28 2.3,-1.8 4.69,-3.57 7.11,-5.22l31.25 17.95c5.17,4.89 11.03,9.89 17.55,15zm204.26 223.64l-295.54 -196.12c-0.31,0.88 -0.61,1.76 -0.89,2.65 -0.3,0.95 -0.56,1.9 -0.77,2.87 -0.17,0.8 -0.29,1.57 -0.38,2.37 -0.11,1.12 -0.03,2.64 0.01,3.79 0.02,0.59 0.06,1.2 0.11,1.79l297.59 188.06c-0.02,-0.9 -0.04,-1.8 -0.07,-2.7l-0.06 -2.71zm-156.91 -55.11l164.59 146.48 0.57 -18.2 -7.59 -5.69 0 -2.8 -157.57 -119.79z'); var cl1='#282829'; $('#spncl1').css('background-color', cl1); var cl2='#AB3235'; $('#spncl2').css('background-color', cl2); var cl3='#ED3237'; $('#spncl3').css('background-color', cl3); var cl4='#96989A'; $('#spncl4').css('background-color', cl4); var cl5='#BDBFC1'; $('#spncl5').css('background-color', cl5); var cl6='#FFF212'; $('#spncl6').css('background-color', cl6); canvas.add(color1.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl1 }));canvas.add(color2.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl2 }));canvas.add(color3.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl3 }));canvas.add(color4.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl4 }));canvas.add(color5.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl5 }));canvas.add(color6.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl6 }));canvas.add(logo1.set({ left: 360, top: 150, 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(color7.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl1 }));canvast.add(color8.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl2 }));canvast.add(color9.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl3 }));canvast.add(color10.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl4 }));canvast.add(color11.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl5 }));canvast.add(color12.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl6 }));color1.selectable=false;color2.selectable=false;color3.selectable=false;color4.selectable=false;color5.selectable=false;color6.selectable=false;logo1.selectable=false;logo2.selectable=false;color7.selectable=false;color8.selectable=false;color9.selectable=false;color10.selectable=false;color11.selectable=false;color12.selectable=false; var dbplnumber = "7"; var dbteam = "TEAM"; var dbplayer = "PLAYER"; var dbbtag = "btag.svg"; var dbfront3d = "../virtual3d_images/sporty_front_84.virtual"; var dbback3d = "../virtual3d_images/sporty_back_84.virtual"; var dbtagleft = "375"; 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 */ 355,363 $("#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);color7.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(); }); 356,364 $("#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);color8.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(); }); 357,365 $("#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);color9.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(); }); 358,366 $("#color4").on("click", "li", function (event) { event.preventDefault(); $('#box').prop('checked', true); var col = $(this).children('span').css('background-color'); var newcol = new fabric.Color(col).toHex(); $('#ctitle').html($(this).attr('title')); color4.set('fill', col);color10.set('fill', col); $('#newcolor').css('background-color', newcol); var color4atr = $(this).attr('title'); $('#color4val').val(color4atr); $(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col); canvas.renderAll(); canvast.renderAll(); }); 359,367 $("#color5").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')); color5.set('fill', col);color11.set('fill', col); $('#newcolor').css('background-color', newcol); var color5atr = $(this).attr('title'); $('#color5val').val(color5atr); $(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col); canvas.renderAll(); canvast.renderAll(); }); 360,368 $("#color6").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')); color6.set('fill', col);color12.set('fill', col); $('#newcolor').css('background-color', newcol); var color6atr = $(this).attr('title'); $('#color6val').val(color6atr); $(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 = "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 = "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 = "300"; var dbnm2top = "290"; 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 = "300"; var dbplayertop = "200"; var PlayerName = $('#playernumber').val(); var nLen = PlayerName.length; PlayerName = " "+PlayerName; playernumber = new fabric.Text(PlayerName, { fontSize: dbplayerfont, left: dbplayerleft, top: dbplayertop, fontFamily: $('#name_ffamily').val(), fontWeight: 'normal', fill: $('#front_sold_color').val(), stroke: $('#front_outline_color').val(), strokeWidth: dbplayerstroke }); canvast.add(playernumber);playernumber.selectable=true; playernumber.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); /*Front text EnD*/ var playernumber2TControl = document.getElementById('playernumber2') function updateControls() { playernumber2TControl.value = playernumber2.getText(); } playernumber2TControl.onkeyup = function () { var playernumber2Text = document.getElementById('playernumber2').value $('#playernumber2val').val(playernumber2Text); playernumber2.set({text: playernumber2Text}) playernumber3.set({text: playernumber2Text}) playernumber4.set({text: playernumber2Text}) playernumber5.set({text: playernumber2Text}) canvast.renderAll() canvas.renderAll() updateControls() } var dbnm3font = "150"; var dbnm3stroke = "2"; var dbnm3left = "0"; var dbnm3top = "0"; 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();