// 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('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-565.55 265.82c11.94,-28.43 36.96,-56.07 71.81,-83.11l-0.02 -1.35c13.86,-17.84 32.05,-29.46 53.89,-35.84 24.82,-6.12 46.37,-3.89 65.63,4.23 12.56,5.54 22.02,12.4 28.84,20.38l6.82 8.61 0.02 1.3c12.14,10.26 23.16,20.06 32.35,29.1 16.28,17.02 26.06,33.62 31.58,49.94l23.43 -17.06 -23.21 -81.6 -34.24 -90.88 -74.09 -23.7 -1.41 2.91 -0.56 -0.12 -3.07 5.68c-3.81,5.88 -8.55,11.32 -13.92,16.47 -7.04,6.5 -14.46,12.54 -21.81,18.27 -3.13,-2.34 -6.04,-4.66 -8.81,-6.97 -4.24,-3.75 -7.91,-7.66 -12.15,-11.48 -1.9,-2.87 -3.63,-5.74 -5.01,-8.6 -2.26,-5.67 -4.37,-9.86 0.2,-12.84l0.07 -2.56 -11.71 2.34 -51.88 24.07 -17.66 19.06 -17 77.19 -34.28 80.06 16.19 16.5zm166.68 -183.65c-5.02,4.3 -9.96,8.06 -14.82,11.32 -1.5,1 -2.71,0.7 -4.12,-0.28l-3.1 -2.15 13.6 -11.08c5.97,-4.9 11.35,-9.84 15.8,-14.85 3.7,-4.17 6.58,-8.76 8.45,-13.88l0.02 -0.08c1.5,2.18 1.95,4.66 1.66,7.35 -0.43,4.32 -3.1,9.19 -6.74,14.29 -3.65,3.12 -6.43,6.47 -10.75,9.36zm-42.25 -32.91c7.72,1.5 16.71,1.8 26.89,1 5.97,-0.46 11.41,-1.65 16.91,-1.95 4.6,-0.25 7.96,0.13 10.01,1.03 -1.49,2.64 -4.63,4.43 -6.42,7.26 -3.39,5.37 -5.97,6.73 -9.17,10.25l-6.41 6.53c-1.93,1.79 -4.4,3.57 -7.18,5.34 -1.59,-1.54 -3.17,-2.64 -4.46,-4.33 -2.81,-3.64 -7.06,-6.58 -8.67,-8.91 -2.28,-2.71 -4.92,-5.15 -6.84,-8.12 -1.72,-4.3 -3.28,-5.55 -4.66,-8.1zm-1.19 -5.37c13.66,-1.09 26.12,-1.48 37.44,-1.19 9.83,0.48 15.59,1.71 17.74,3.62 0.24,-0.36 0.3,-0.81 0.15,-1.39 -0.76,-1.65 -1.75,-3.01 -5.55,-3.59 -4.65,-1.29 -10.07,-1.93 -16.1,-2.05 -10.47,-0.19 -21.5,0.3 -33.35,1.81 -0.19,0.96 -0.19,1.89 -0.33,2.79zm-5.4 4.12c0.14,4.93 3.77,11.35 10.42,19.06 4.47,5.25 9.66,10.35 15.86,15.25l2.48 -1.74c-6.16,-5.42 -11.72,-10.78 -16.15,-16.06 -6.17,-7.34 -10.5,-14.16 -10.25,-19.67l-2.21 -1.02 -0.15 4.18zm-102.29 542.82l-50 0 0 9.17 50 0 0 -9.17z');color3 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-442.31 43.89c-0.22,1.9 0.16,3.69 1.19,5.37 7.72,1.5 16.71,1.8 26.89,1 5.97,-0.46 11.41,-1.65 16.91,-1.95 4.6,-0.25 7.96,0.13 10.01,1.03 0.39,-1.03 0.34,-2.2 0.18,-3.02 -2.15,-1.91 -7.91,-3.14 -17.74,-3.62 -11.32,-0.29 -23.78,0.1 -37.44,1.19zm-129.78 256.98l2.55 -6.09c19.21,-49.58 63.43,-83.95 75.55,-95.59l2.14 5.24c0.07,0.15 0.16,0.17 0.28,0.07l-0.57 -3.84c14.06,-22.85 34.9,-36.13 54.49,-41.88 20.03,-4.82 38.08,-5.69 57.99,2.86 18.91,7.25 33.44,23.09 40.78,37.42l0.28 -3.97c23.99,20.88 53.89,46.7 66.31,87.04l2.11 6.25 -2.75 14.3c-5.43,-10.02 -14.06,-19.9 -26.68,-29.61 -12.69,-9.92 -25.78,-15.7 -38.67,-23.55l-3.6 5.39c-7.17,-20.43 -17.57,-36.13 -30.58,-48.01 -25.1,-20.89 -51.31,-22.65 -78.91,-0.63 -16.27,13.74 -28.39,31.64 -36.75,53.29l-12.31 0.82c-11.48,10.39 -21.51,15.91 -32.57,23.43 -18.18,12.37 -32.33,26.26 -41.95,42.51l-2.91 -12.93 5.77 -12.52zm164.78 -220.89l-13.6 11.08 3.1 2.15c1.41,0.98 2.62,1.28 4.12,0.28 4.86,-3.26 9.8,-7.02 14.82,-11.32 4.32,-2.89 7.1,-6.24 10.75,-9.36 3.64,-5.1 6.31,-9.97 6.74,-14.29 0.29,-2.69 -0.16,-5.17 -1.66,-7.35l-0.02 0.08c-1.87,5.12 -4.75,9.71 -8.45,13.88 -4.45,5.01 -9.83,9.95 -15.8,14.85zm-40.25 -36.15l-1.65 2.77 -0.07 2.56c-4.57,2.98 -2.46,7.17 -0.2,12.84 1.38,2.86 3.11,5.73 5.01,8.6 4.24,3.82 7.91,7.73 12.15,11.48 2.77,2.31 5.68,4.63 8.81,6.97l-3.23 -2.51 5.31 -4.22c-6.2,-4.9 -11.39,-10 -15.86,-15.25 -6.65,-7.71 -10.28,-14.13 -10.42,-19.06l0.15 -4.18zm-102.44 547l-50 0 0 9.17 50 0 0 -9.17z');color4 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-445.35 44.85l-1.26 -6.18 8.44 -5.39 40.16 -0.08 6.95 6.72 0.67 1.91c-0.6,-0.19 -1.3,-0.36 -2.14,-0.49 -4.65,-1.29 -10.07,-1.93 -16.1,-2.05 -10.47,-0.19 -21.5,0.3 -33.35,1.81 -0.19,0.96 -0.19,1.89 -0.33,2.79 -0.22,1.9 0.16,3.69 1.19,5.37 1.38,2.55 2.94,3.8 4.66,8.1 1.92,2.97 4.56,5.41 6.84,8.12 1.61,2.33 5.86,5.27 8.67,8.91 1.29,1.69 2.87,2.79 4.46,4.33 2.78,-1.77 5.25,-3.55 7.18,-5.34l6.41 -6.53c3.2,-3.52 5.78,-4.88 9.17,-10.25 1.79,-2.83 4.93,-4.62 6.42,-7.26 0.39,-1.03 0.34,-2.2 0.18,-3.02 0.25,-0.34 0.31,-0.79 0.15,-1.39 -0.1,-0.2 -0.19,-0.39 -0.3,-0.58l4.54 1.49 -1.41 2.91 -0.56 -0.12 -3.07 5.68c-3.81,5.88 -8.55,11.32 -13.92,16.47 -7.08,6.54 -14.4,12.52 -21.79,18.28l-3.25 -2.52 5.31 -4.22 2.48 -1.74c-6.16,-5.42 -11.72,-10.78 -16.15,-16.06 -6.17,-7.34 -10.5,-14.16 -10.25,-19.67zm-121.85 233.99c18.98,-46.3 61.3,-76.47 73.42,-88.11l0.27 1.84c14.18,-22.02 35.81,-34.45 55.39,-40.2 20.89,-5.13 41.25,-4.71 61.16,3.84 9.98,4.28 19.36,9.86 26.7,17.94 4.21,4.63 8.09,9.83 11.64,15.56l0.22 -2.12c23.98,20.88 51.77,42.72 65.09,83.21l2.11 6.25 0.43 -20.79 -3.86 2.82c-5.52,-16.32 -15.3,-32.92 -31.58,-49.94 -9.19,-9.04 -20.21,-18.84 -32.35,-29.1l-0.02 -1.3 -6.82 -8.61c-6.82,-7.98 -16.28,-14.84 -28.84,-20.38 -19.26,-8.12 -40.81,-10.35 -65.63,-4.23 -21.84,6.38 -40.03,18 -53.89,35.84l0.02 1.35c-34.85,27.04 -59.87,54.68 -71.81,83.11l-3.72 -3.8 -0.48 22.91 2.55 -6.09zm17.2 311.99l-50 0 0 9.17 50 0 0 -9.17z');logo1 = new fabric.Path('M0.91 1.09c0,0.01 -0.01,0.01 -0.01,0.01 0,0 0,0.01 -0.01,0.01l-0.03 0.03c-0.01,0 -0.02,0.01 -0.02,0.01l-0.1 0.1c0,0 0,0 -0.01,0 -0.01,0.02 -0.03,0.03 -0.04,0.04l-0.03 0.03c-0.01,0.01 -0.02,0.01 -0.02,0.02 -0.01,-0.01 -0.06,-0.07 -0.07,-0.08 -0.03,-0.03 -0.07,-0.08 -0.1,-0.11 -0.01,-0.01 -0.01,-0.02 -0.02,-0.02 0,-0.01 -0.01,-0.01 -0.01,-0.02 -0.03,-0.03 -0.05,-0.05 -0.07,-0.08 -0.03,-0.02 -0.08,-0.09 -0.11,-0.11 -0.07,-0.05 -0.14,-0.05 -0.22,-0.02 -0.01,0.01 -0.03,0.03 -0.04,0.03 0,0.01 0.05,0.07 0.06,0.07l0.07 0.08c0,0 0,0 0.01,0.01 0,0 0.01,0.01 0.01,0.01 0.01,0.01 0.02,0.02 0.02,0.03l0.04 0.04c0.05,0.05 0.1,0.1 0.14,0.16 0,0 0.01,0 0.01,0.01l0.09 0.1c0.01,0.01 0.02,0.02 0.02,0.03 0.01,0.01 0.02,0.01 0.03,0.02 0.04,0.03 0.09,0.06 0.16,0.05 0.05,0 0.09,-0.03 0.13,-0.06 0.02,-0.02 0.04,-0.04 0.07,-0.06l0.07 -0.07c0.02,-0.02 0.13,-0.11 0.13,-0.12 0.01,0 0.01,-0.01 0.02,-0.01 0.06,-0.1 0.05,-0.19 -0.02,-0.27l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,0 -0.01,-0.01 -0.01,-0.01l-0.09 -0.1c-0.02,-0.02 -0.03,-0.04 -0.05,-0.06 -0.02,-0.02 -0.03,-0.04 -0.05,-0.05 -0.01,-0.02 -0.1,-0.11 -0.1,-0.12 -0.02,0.01 -0.05,0.07 -0.06,0.09 -0.02,0.06 -0.01,0.12 0.02,0.17 0.01,0.03 0.04,0.06 0.06,0.08 0.04,0.04 0.07,0.08 0.1,0.12l0.19 0.2c0.01,0.01 0.02,0.02 0.02,0.02zm-0.35 0.04c0,-0.01 0.01,-0.01 0.02,-0.02 0.04,-0.06 0.06,-0.12 0.04,-0.19 -0.02,-0.07 -0.05,-0.09 -0.09,-0.13l-0.03 -0.04c-0.01,0 -0.01,-0.01 -0.02,-0.02 -0.03,-0.02 -0.06,-0.06 -0.09,-0.09l-0.1 -0.11c-0.01,-0.01 -0.07,-0.07 -0.07,-0.08 0.01,0 0.01,-0.01 0.02,-0.01 0,-0.01 0,-0.01 0.01,-0.01l0.04 -0.04c0.01,-0.01 0.02,-0.02 0.03,-0.03 0.01,0 0.01,-0.01 0.02,-0.01l0.12 -0.11c0,-0.01 0.02,-0.03 0.03,-0.03l0.08 0.09c0.03,0.03 0.05,0.05 0.07,0.08l0.16 0.17c0.04,0.04 0.06,0.07 0.11,0.09 0.07,0.03 0.12,0.02 0.18,-0.01 0.01,0 0.03,-0.02 0.04,-0.03 0,0 -0.02,-0.02 -0.02,-0.02l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03l-0.05 -0.05c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,-0.01 -0.01,-0.02 -0.02,-0.03 -0.03,-0.04 -0.07,-0.07 -0.1,-0.11l-0.05 -0.05c-0.03,-0.03 -0.03,-0.04 -0.06,-0.06 -0.03,-0.03 -0.09,-0.06 -0.16,-0.05 -0.03,0.01 -0.05,0.02 -0.07,0.03 -0.03,0.01 -0.04,0.03 -0.06,0.05 -0.03,0.02 -0.06,0.05 -0.09,0.07 -0.01,0.01 -0.01,0.02 -0.02,0.03 -0.02,0.01 -0.04,0.03 -0.06,0.05 -0.01,0.01 -0.09,0.08 -0.1,0.09 -0.01,0.02 -0.03,0.05 -0.04,0.09 -0.02,0.06 0,0.12 0.03,0.16 0.02,0.03 0.03,0.04 0.05,0.06l0.15 0.17c0.01,0 0.02,0.02 0.03,0.02 0.01,0.01 0.02,0.02 0.02,0.03l0.08 0.08c0.01,0.01 0.02,0.02 0.03,0.03l0.05 0.06c0.01,0.01 0.09,0.11 0.1,0.11z>');logo2 = new fabric.Path('M0.91 1.09c0,0.01 -0.01,0.01 -0.01,0.01 0,0 0,0.01 -0.01,0.01l-0.03 0.03c-0.01,0 -0.02,0.01 -0.02,0.01l-0.1 0.1c0,0 0,0 -0.01,0 -0.01,0.02 -0.03,0.03 -0.04,0.04l-0.03 0.03c-0.01,0.01 -0.02,0.01 -0.02,0.02 -0.01,-0.01 -0.06,-0.07 -0.07,-0.08 -0.03,-0.03 -0.07,-0.08 -0.1,-0.11 -0.01,-0.01 -0.01,-0.02 -0.02,-0.02 0,-0.01 -0.01,-0.01 -0.01,-0.02 -0.03,-0.03 -0.05,-0.05 -0.07,-0.08 -0.03,-0.02 -0.08,-0.09 -0.11,-0.11 -0.07,-0.05 -0.14,-0.05 -0.22,-0.02 -0.01,0.01 -0.03,0.03 -0.04,0.03 0,0.01 0.05,0.07 0.06,0.07l0.07 0.08c0,0 0,0 0.01,0.01 0,0 0.01,0.01 0.01,0.01 0.01,0.01 0.02,0.02 0.02,0.03l0.04 0.04c0.05,0.05 0.1,0.1 0.14,0.16 0,0 0.01,0 0.01,0.01l0.09 0.1c0.01,0.01 0.02,0.02 0.02,0.03 0.01,0.01 0.02,0.01 0.03,0.02 0.04,0.03 0.09,0.06 0.16,0.05 0.05,0 0.09,-0.03 0.13,-0.06 0.02,-0.02 0.04,-0.04 0.07,-0.06l0.07 -0.07c0.02,-0.02 0.13,-0.11 0.13,-0.12 0.01,0 0.01,-0.01 0.02,-0.01 0.06,-0.1 0.05,-0.19 -0.02,-0.27l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,0 -0.01,-0.01 -0.01,-0.01l-0.09 -0.1c-0.02,-0.02 -0.03,-0.04 -0.05,-0.06 -0.02,-0.02 -0.03,-0.04 -0.05,-0.05 -0.01,-0.02 -0.1,-0.11 -0.1,-0.12 -0.02,0.01 -0.05,0.07 -0.06,0.09 -0.02,0.06 -0.01,0.12 0.02,0.17 0.01,0.03 0.04,0.06 0.06,0.08 0.04,0.04 0.07,0.08 0.1,0.12l0.19 0.2c0.01,0.01 0.02,0.02 0.02,0.02zm-0.35 0.04c0,-0.01 0.01,-0.01 0.02,-0.02 0.04,-0.06 0.06,-0.12 0.04,-0.19 -0.02,-0.07 -0.05,-0.09 -0.09,-0.13l-0.03 -0.04c-0.01,0 -0.01,-0.01 -0.02,-0.02 -0.03,-0.02 -0.06,-0.06 -0.09,-0.09l-0.1 -0.11c-0.01,-0.01 -0.07,-0.07 -0.07,-0.08 0.01,0 0.01,-0.01 0.02,-0.01 0,-0.01 0,-0.01 0.01,-0.01l0.04 -0.04c0.01,-0.01 0.02,-0.02 0.03,-0.03 0.01,0 0.01,-0.01 0.02,-0.01l0.12 -0.11c0,-0.01 0.02,-0.03 0.03,-0.03l0.08 0.09c0.03,0.03 0.05,0.05 0.07,0.08l0.16 0.17c0.04,0.04 0.06,0.07 0.11,0.09 0.07,0.03 0.12,0.02 0.18,-0.01 0.01,0 0.03,-0.02 0.04,-0.03 0,0 -0.02,-0.02 -0.02,-0.02l-0.15 -0.17c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03l-0.05 -0.05c-0.01,-0.01 -0.02,-0.02 -0.03,-0.03 0,-0.01 -0.01,-0.02 -0.02,-0.03 -0.03,-0.04 -0.07,-0.07 -0.1,-0.11l-0.05 -0.05c-0.03,-0.03 -0.03,-0.04 -0.06,-0.06 -0.03,-0.03 -0.09,-0.06 -0.16,-0.05 -0.03,0.01 -0.05,0.02 -0.07,0.03 -0.03,0.01 -0.04,0.03 -0.06,0.05 -0.03,0.02 -0.06,0.05 -0.09,0.07 -0.01,0.01 -0.01,0.02 -0.02,0.03 -0.02,0.01 -0.04,0.03 -0.06,0.05 -0.01,0.01 -0.09,0.08 -0.1,0.09 -0.01,0.02 -0.03,0.05 -0.04,0.09 -0.02,0.06 0,0.12 0.03,0.16 0.02,0.03 0.03,0.04 0.05,0.06l0.15 0.17c0.01,0 0.02,0.02 0.03,0.02 0.01,0.01 0.02,0.02 0.02,0.03l0.08 0.08c0.01,0.01 0.02,0.02 0.03,0.03l0.05 0.06c0.01,0.01 0.09,0.11 0.1,0.11z>');color5 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-51.15 10.61l47.96 0 0 580.66 -544.3 0 0 -3.35 -47.18 0 0 -581.04 543.52 0 0 3.73zm-498.85 580.22l-50 0 0 9.17 50 0 0 -9.17z');color6 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-576.16 231.39c8.25,-19.69 32.33,-40 54.78,-61.23l0.01 -2c19.62,-23.22 47.53,-38.01 75.41,-43.15 26.94,-4.05 50.02,1.23 70.44,12.94 10.2,5.78 19.63,13.75 27.24,22.95l-1.68 2.71 -0.33 5.02c19.31,15.9 35.42,30.35 47.24,44.54 10.08,12.57 17.56,26.16 22.05,40.95l5.12 -5.47 -22.95 -120.32 -22.85 -60.74 -73.63 -30.28 -2.68 1.87c-2.18,-1.01 -6.62,-0.57 -12.61,0.23 -9.67,1.29 -20.85,0.04 -32.6,-1.3 -6.07,-0.7 -10.63,-3.27 -18.76,-0.62l-4.3 1.33 -4.12 -2.8 -74.71 29.01 -16.8 34.37 -15.04 91.41 -2.93 38.09 3.7 2.49zm26.16 359.44l-50 0 0 9.17 50 0 0 -9.17z');color7 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-462.83 28.1l4.64 1.96c18.05,0.95 36.66,1.95 55.2,2.43l7.68 4.82 -2.68 1.87c-2.18,-1.01 -6.62,-0.57 -12.61,0.23 -9.67,1.29 -20.85,0.04 -32.6,-1.3 -6.07,-0.7 -10.63,-3.27 -18.76,-0.62l-4.3 1.33 -2.27 -4.76 5.7 -5.96zm188.27 261.26l-3.71 -7.16c-8.12,-29.59 -24.42,-50.9 -34.73,-60.94 -13.88,-15.28 -22.9,-24.18 -38.46,-37.68l0.28 -4.22c-8.58,-12.59 -21.57,-21.95 -30.66,-27.14 -19.34,-11.04 -40.5,-14.4 -62.14,-11.15 -32.56,5.99 -58.08,23.65 -77.14,50.56l-0.18 -3.8c-14.87,15.79 -50.03,46.28 -58.05,70.56l-5.17 12.34 4.53 9.54c10.84,-9.37 23.52,-15.78 35.44,-23.42 13.76,-8.81 23.62,-16.91 29.28,-24.79l1.46 20.67c11.76,-26.16 29.42,-46.01 52.64,-59.93 27.95,-15.58 54.67,-11.18 80.28,11 11.38,11 20.62,23.55 26.4,38.59l-1.95 -18.6c10.19,18.1 30.31,27.37 46.38,39.94 15.53,12.14 27.82,23.71 33.38,37.43l2.12 -11.8zm-275.44 301.47l-50 0 0 9.17 50 0 0 -9.17z');color8 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-303.05 213.17c-11.82,-14.19 -27.93,-28.64 -47.24,-44.54l0.33 -5.02 1.68 -2.71c-7.61,-9.2 -17.04,-17.17 -27.24,-22.95 -20.42,-11.71 -43.5,-16.99 -70.44,-12.94 -27.88,5.14 -55.79,19.93 -75.41,43.15l-0.01 2c-22.45,21.23 -46.53,41.54 -54.78,61.23l-3.7 -2.49 -0.19 21.28 2.55 -6.09c5.72,-14.74 20.31,-29.72 27.9,-37.56 8.7,-8.99 23.49,-22.38 28.04,-27.35l0.14 1.45c20.68,-27.34 49.78,-42.03 76.39,-46.93 23.42,-3.52 44.94,-0.49 65.63,11.32 8.24,4.71 20.57,13.52 29.01,24.56l-0.43 6.62c16.61,14.42 27.67,24.07 42.7,40.62 10.66,11.73 25.85,35.89 29.1,52.49l3.14 -20.66 -5.12 5.47c-4.49,-14.79 -11.97,-28.38 -22.05,-40.95zm-153.61 -187.63l2.1 1.27c16.86,0.08 33.43,1.58 50.14,2.38l2.03 -2.5 -5.76 -3.74 -44.19 -0.46 -4.32 3.05zm-93.34 565.29l-50 0 0 9.17 50 0 0 -9.17z'); var cl1='#C03437'; $('#spncl1').css('background-color', cl1); var cl2='#283151'; $('#spncl2').css('background-color', cl2); var cl3='#FBB138'; $('#spncl3').css('background-color', cl3); var cl4='#FFFFFF'; $('#spncl4').css('background-color', cl4); canvas.add(color1.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl1 }));canvas.add(color2.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl2 }));canvas.add(color3.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl3 }));canvas.add(color4.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl4 }));canvas.add(logo1.set({ left: 520, top: 552, 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.03, stroke: '#191919', fill: '#FFFFFF' }));canvast.add(color5.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl1 }));canvast.add(color6.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl2 }));canvast.add(color7.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl3 }));canvast.add(color8.set({ scaleX: 1, scaleY: 1, flipY: false, originX: "center", originY: "center", fill: cl4 }));color1.selectable=false;color2.selectable=false;color3.selectable=false;color4.selectable=false;logo1.selectable=false;logo2.selectable=false;color5.selectable=false;color6.selectable=false;color7.selectable=false;color8.selectable=false; var dbplnumber = "4"; var dbteam = "TEAM"; var dbplayer = "PLAYER"; var dbbtag = "btag.svg"; var dbfront3d = "../virtual3d_images/winger_front_124.virtual"; var dbback3d = "../virtual3d_images/winger_back_124.virtual"; var dbtagleft = "235"; var dbtagtop = "375"; 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 */ 683,689 $("#color1").on("click", "li", function (event) { event.preventDefault(); $('#box').prop('checked', true); var col = $(this).children('span').css('background-color'); var newcol = new fabric.Color(col).toHex(); $('#ctitle').html($(this).attr('title')); color1.set('fill', col);color5.set('fill', col); $('#newcolor').css('background-color', newcol); var color1atr = $(this).attr('title'); $('#color1val').val(color1atr); $(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col); canvas.renderAll(); canvast.renderAll(); }); 684,690 $("#color2").on("click", "li", function (event) { event.preventDefault(); $('#box').prop('checked', true); var col = $(this).children('span').css('background-color'); var newcol = new fabric.Color(col).toHex(); $('#ctitle').html($(this).attr('title')); color2.set('fill', col);color6.set('fill', col); $('#newcolor').css('background-color', newcol); var color2atr = $(this).attr('title'); $('#color2val').val(color2atr); $(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col); canvas.renderAll(); canvast.renderAll(); }); 685,691 $("#color3").on("click", "li", function (event) { event.preventDefault(); $('#box').prop('checked', true); var col = $(this).children('span').css('background-color'); var newcol = new fabric.Color(col).toHex(); $('#ctitle').html($(this).attr('title')); color3.set('fill', col);color7.set('fill', col); $('#newcolor').css('background-color', newcol); var color3atr = $(this).attr('title'); $('#color3val').val(color3atr); $(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col); canvas.renderAll(); canvast.renderAll(); }); 686,692 $("#color4").on("click", "li", function (event) { event.preventDefault(); $('#box').prop('checked', true); var col = $(this).children('span').css('background-color'); var newcol = new fabric.Color(col).toHex(); $('#ctitle').html($(this).attr('title')); color4.set('fill', col);color8.set('fill', col); $('#newcolor').css('background-color', newcol); var color4atr = $(this).attr('title'); $('#color4val').val(color4atr); $(this).closest('.panel').children('.panel-heading').children('.picker').css('background-color', col); canvas.renderAll(); canvast.renderAll(); }); /*Front Text start*/ /*Front Team text start*/ var teamfrontTControl = document.getElementById('teamfront') function updateControls() { teamfrontTControl.value = teamfront.getText(); } teamfrontTControl.onkeyup = function () { var teamfrontText = document.getElementById('teamfront').value; var nLength = teamfrontText.length; teamfrontText = " "+teamfrontText; $('#teamfrontval').val(teamfrontText); teamfront1.setText(teamfrontText) canvas.renderAll() updateControls() } var dbteamfont = "30"; var dbteamstroke = "0.3"; var dbteamleft = "180"; var dbteamtop = "115"; 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 = "40"; var dbnm1stroke = "0.5"; var dbnm1left = "307"; var dbnm1top = "195"; var dbnm1angle = "-12"; 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 = "40"; var dbnm2stroke = "0.5"; var dbnm2left = "55"; var dbnm2top = "195"; 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 = "0"; var dbplayerstroke = "0"; var dbplayerleft = "0"; var dbplayertop = "0"; 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 = "0"; 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 = "0"; 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();