// 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('M164.47 81.62c3.46,3.52 6.29,5.8 8.66,7.18l0.01 -0.4c-1.75,-3.63 -3.33,-7.29 -5.1,-10.92 -2.67,-5.05 -5.6,-10.04 -8.85,-14.97l-11.05 -18.1 -6.05 -11.6c-0.93,-2.28 -1.68,-4.56 -2.14,-6.82 7.68,-0.13 15.21,-0.85 22.88,-1.18 7.34,-0.38 14.65,-0.38 21.91,-0.01 7.67,0.4 15.13,0.95 22.99,1.2 -1.02,4.12 -2.65,7.86 -4.6,11.39 -3.38,5.8 -6.69,11.3 -9.92,16.5 -1.8,2.86 -3.6,5.71 -5.41,8.57 -2.92,4.26 -5.55,8.52 -7.97,12.8 -2.29,4.44 -4.3,8.89 -6.45,13.34l0 0.1c2.33,-1.04 5.94,-4.23 10.53,-9.07l12.1 -12.46c5.2,-5.47 9.69,-10.31 13.91,-15.97 3.73,-5.1 6.86,-10.53 9.02,-16.51 1.18,-2.73 1.65,-5.55 1,-8.49l-3.34 -11.11 -17.35 -9.61 -50.47 0.16 -20.08 8.12 -1.38 12.53c-1.33,3.16 0.33,8.46 3.43,14.79 3.65,7.12 8.51,14.06 14.81,20.81 5.95,6.55 12.31,13.13 18.91,19.73zm387.12 221.23c1.76,-0.12 3.62,-0.09 5.54,0.03 0.18,-0.63 -0.19,-1.13 -0.09,-1.97l1.89 -0.65 -1.59 -3.9 -6.47 2.31 0.72 4.18zm4.69 27.4l11.93 69.09 11.87 74.06c2.9,19.3 5.01,35.99 7.07,52.46l2.46 -10 -4.22 -54.69 -12.35 -79.84 -8.94 -62.25 -4.15 1.7 -0.53 -0.11c0.34,-1.56 -0.2,-1.32 -0.3,-1.98l-0.09 -1.14c-1.65,-0.11 -3.3,-0.15 -4.94,-0.08l2.19 12.78zm-198.7 -27.18l7.62 0.08 0.91 -4.57 -4.26 -1.32 -3.19 1.19 -1.08 4.62zm-8.7 39.79l-19.04 72.21 -4.53 146.25 0.07 21.95 3.07 -2.05c0.82,-27.69 2.51,-55.64 5.41,-83.97 3.77,-36.13 8.94,-73.22 15.63,-111.34l8.08 -44.71 4.67 -23.31 -8.01 -0.06c-1.84,8.32 -3.62,16.67 -5.35,25.03zm-86.29 -30.06c-58.71,3.88 -118.01,4.22 -177.97,0.6l-5.84 8.03 4.73 11.25c57.18,5.67 117.58,5.15 180.6,-0.43l4.26 -10.94 -5.78 -8.51zm9.53 -92.01l-4.22 10.18 6.04 6.87c20.93,1.44 40.74,-1.3 59.67,-7.37l4.64 -10.09 -6.21 -8.78c-18.79,5.52 -38.47,9.19 -59.92,9.19zm-196.4 3.64c-21.44,0 -41.12,-3.67 -59.92,-9.19l-6.2 8.78 4.63 10.09c18.94,6.07 38.75,8.81 59.67,7.37l6.04 -6.87 -4.22 -10.18z');color3 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-516.85 340.03c58.95,5.1 119.6,4.85 181.88,-0.47l6.88 9.37 -5.32 10.32c-70.86,6.67 -132.93,6.88 -185.04,-0.2l-5.16 -10.7 6.76 -8.32zm-10.25 -92.24c-20.51,1.24 -40.24,-1.27 -59.3,-7.11l-6.79 10 5.7 9.45c21.86,5.91 41.81,7.37 59.92,4.53l4.93 -8.83 -4.46 -8.04zm9.42 -46.26c-20.39,-0.18 -41.25,-4.47 -62.47,-11.95l-10.31 5.55 7.42 13.44c18.27,6.39 38.28,9.7 60.08,9.84l5.08 -5.63 0.2 -11.25zm192.63 42.62c20.5,1.24 40.24,-1.27 59.29,-7.11l6.8 10 -5.7 9.45c-21.86,5.91 -41.81,7.37 -59.93,4.53l-4.92 -8.83 4.46 -8.04zm-9.42 -46.26c20.39,-0.18 41.24,-4.47 62.46,-11.95l10.32 5.55 -7.43 13.44c-18.26,6.39 -38.27,9.7 -60.08,9.84l-7.42 -6.17 2.15 -10.71zm-131.86 -177.67c0.08,4.44 0.94,8.6 2.38,12.62 2.98,8.36 8.82,16.75 13.97,23.96 7.64,10.69 15.04,20.14 22.09,31.37 -2.08,-1.36 -4.48,-3.37 -7.32,-6.23 -5.48,-8.03 -11.16,-15.44 -16.97,-23.57 -5.3,-7.42 -11.25,-16.02 -14.32,-24.62 -1.53,-4.27 -2.44,-8.71 -2.53,-13.49l2.7 -0.04zm42.33 66.84c3.79,-5.91 7.71,-11.64 11.95,-17.31 6.45,-8.63 18.04,-25.58 22.09,-36.55 1.59,-4.31 2.6,-8.75 2.68,-13.2l2.7 0.05c-0.09,4.78 -1.16,9.52 -2.84,14.08 -4.14,11.21 -15.85,28.38 -22.47,37.24 -1.81,2.42 -3.56,4.85 -5.27,7.3l-0.93 0.96c-3.12,3.3 -5.79,5.82 -7.91,7.43zm362.7 212.19l0.65 4.26c2.87,-0.26 5.91,-0.46 9.13,-0.61l0 0 -0.71 -4.2 -6.48 -2.41 -2.59 2.96zm2.92 19.03l5.77 37.58 10.77 66.79c5.14,31.31 9.98,64.22 14.61,98.31 2.78,20.6 4.8,40.91 6.46,61.08l10.84 5.37 0.13 -19.4 -2.87 -10.28c-2.99,-30.05 -6.77,-61.01 -12.01,-93.66l-15.01 -91.08 -9.37 -55.48c-3.28,0.2 -6.41,0.45 -9.32,0.77zm-163.46 -19.04l-0.8 4.72 0 0 -9.2 -0.61 0.88 -4.54 4.12 -1.57 5 2zm-3.33 19.48l-5.59 32.67c-5.3,31.75 -10.24,63.45 -14.98,95.11 -3.42,24.46 -6.39,48.96 -8.86,73.51 -2.11,21.62 -3.54,43.27 -4.66,64.94l-5.73 2.53 -3.64 -4.81c0.69,-21.35 1.83,-42.52 3.78,-63.39 2.25,-24.79 5.03,-49.93 8.67,-75.6 4.58,-31.07 9.61,-62.15 15.23,-93.23l6.27 -32.39 9.51 0.66zm-289.42 -32.51c59.01,2.5 117.81,2.09 176.41,-1.25l5.78 9.07 -5.63 11.25c-61.85,4.49 -121.01,4.92 -177.03,0.66l-5.95 -10.37 6.42 -9.36zm-35.41 304.62l-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>');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('M127.67 23.84l3.81 1.07 87.28 0.25 9.4 -12.2 -23.91 -6.09 -71.87 -0.16 -4.71 17.13zm472.33 -23.84l-50 0 0 9.17 50 0 0 -9.17zm-550 590.83l-50 0 0 9.17 50 0 0 -9.17zm222.12 -370.04c21.45,0 41.13,-3.67 59.92,-9.19l6.21 8.78 -4.64 10.09c-18.93,6.07 -38.74,8.81 -59.67,7.37l-6.04 -6.87 4.22 -10.18zm91.74 75.96l-0.31 2.76c-2.76,0.93 -5.22,1.85 -5.89,2.67l-0.95 -5.49 7.15 0.06zm186.13 0.65l0.39 2.66c2.59,0.61 4.94,1.56 7.04,2.89 -0.2,-0.68 -0.1,-1.22 -0.15,-1.83l-1.21 -4.93 -6.07 1.21zm2.57 17.11c3.22,20.98 6.68,42.05 10.09,63.11 4.59,27.64 9.05,55.54 13.46,83.56 2.08,14.2 4.04,28.27 5.73,42.03l3.29 -10.65 -22.91 -168.49 -2.85 -1.89c0.06,-0.37 -0.05,-0.79 0.03,-1.15 0.15,-0.6 0.18,-1.4 0.01,-2.02l-0.22 -1.47 -0.03 -0.2 0 0.01c-1.61,-1.23 -3.81,-2.17 -6.6,-2.84zm-190.86 -0.62c-1.26,9.12 -2.62,18.24 -3.82,27.31l-13.08 93.92c-6.78,47.01 -12.3,93.74 -16.74,140.23l-3.61 2.18 0.91 -27.74 6.89 -127.6 21.68 -99.58 1.5 -0.77c0.12,-1.04 -0.44,-1.29 0.07,-2.97 0.23,-0.72 0.24,-1.59 0.48,-2.17l0 -0.07c0.92,-0.99 3.04,-1.89 5.72,-2.73l0 -0.01zm-277.08 -0.49c59.96,3.62 119.26,3.28 177.97,-0.6l5.78 8.51 -4.26 10.94c-63.02,5.58 -123.42,6.1 -180.6,0.43l-4.73 -11.25 5.84 -8.03zm-8.9 -88.97c-21.44,0 -41.12,-3.67 -59.92,-9.19l-6.2 8.78 4.63 10.09c18.94,6.07 38.75,8.81 59.67,7.37l6.04 -6.87 -4.22 -10.18z');color6 = new fabric.Path('M600 0l-50 0 0 9.17 50 0 0 -9.17zm-466.82 19.5c13.06,-3.2 26.63,-4.82 40.49,-4.82 13.82,-0.01 27.92,1.58 42.09,4.78l-0.6 2.63c-13.97,-3.15 -27.88,-4.72 -41.49,-4.71 -13.63,0 -26.98,1.59 -39.84,4.74l-0.65 -2.62zm-50.03 320.53c58.95,5.1 119.6,4.85 181.88,-0.47l6.88 9.37 -5.32 10.32c-70.86,6.67 -132.93,6.88 -185.04,-0.2l-5.16 -10.7 6.76 -8.32zm293.42 -45.87l-0.4 3.28 0 -0.01c-3.18,0.37 -6.38,0.86 -9.6,1.49l-0.01 0 0.39 -3.04 3.08 -2.95 6.54 1.23zm-2.11 17.53l-4.44 36.87 -17.06 124.45c-4.94,35.81 -9.63,71.76 -13.61,108.1l-5.31 2.09 -3.35 -4.72c3.28,-35.44 7.51,-70.77 12.27,-106.03l17.21 -124.68c1.56,-11.55 3.07,-23.09 4.57,-34.61 3.11,-0.76 6.36,-1.23 9.72,-1.46l0 -0.01zm163.31 -16.6l0.4 3.03 9.21 1.17 -0.38 -2.65 -3.33 -2.26 -5.9 0.71zm2.25 17.26l2.41 18.48c5.46,39.2 12.04,78.04 18.06,117.06 4.64,29.13 8.82,58.1 12.11,86.77 1.9,15.81 3.36,31.4 4.43,46.8l10.23 1.44 0.2 -17.39 -5.35 -33.6c-2.63,-23.68 -5.57,-47.3 -9.28,-70.82 -4.9,-31.68 -10.04,-63.21 -15.3,-94.68 -2.81,-17.62 -5.52,-35.19 -8.08,-52.71 -3.13,-0.64 -6.28,-1.11 -9.43,-1.35zm-467.12 -64.56c-20.51,1.24 -40.24,-1.27 -59.3,-7.11l-6.79 10 5.7 9.45c21.86,5.91 41.81,7.37 59.92,4.53l4.93 -8.83 -4.46 -8.04zm9.42 -46.26c-20.39,-0.18 -41.25,-4.47 -62.47,-11.95l-10.31 5.55 7.42 13.44c18.27,6.39 38.28,9.7 60.08,9.84l5.08 -5.63 0.2 -11.25zm192.63 42.62c20.5,1.24 40.24,-1.27 59.29,-7.11l6.8 10 -5.7 9.45c-21.86,5.91 -41.81,7.37 -59.93,4.53l-4.92 -8.83 4.46 -8.04zm-9.42 -46.26c20.39,-0.18 41.24,-4.47 62.46,-11.95l10.32 5.55 -7.43 13.44c-18.26,6.39 -38.27,9.7 -60.08,9.84l-7.42 -6.17 2.15 -10.71zm-180.12 88.32c59.01,2.5 117.81,2.09 176.41,-1.25l5.78 9.07 -5.63 11.25c-61.85,4.49 -121.01,4.92 -177.03,0.66l-5.95 -10.37 6.42 -9.36zm-35.41 304.62l-50 0 0 9.17 50 0 0 -9.17z'); var cl1='#1F5CA9'; $('#spncl1').css('background-color', cl1); var cl2='#ED3237'; $('#spncl2').css('background-color', cl2); var cl3='#FFFFFF'; $('#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: 288, top: 57, scaleX: 10, scaleY: 10, 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(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 = "7"; var dbteam = "TEAM"; var dbplayer = "PLAYER"; var dbbtag = "btag.svg"; var dbfront3d = "../virtual3d_images/assassin_all_star_front_117.virtual"; var dbback3d = "../virtual3d_images/assassin_all_star_back_117.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 */ 623,628 $("#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(); }); 624,629 $("#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(); }); 625,630 $("#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 = "30"; var dbteamstroke = "0.3"; var dbteamleft = "170"; var dbteamtop = "125"; 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 = "0.5"; var dbnm1left = "315"; var dbnm1top = "140"; var dbnm1angle = "-25"; 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 = "0.5"; var dbnm2left = "35"; var dbnm2top = "140"; var dbnm2angle = "25"; 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 = "0"; 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 = "0"; var dbnm4left = "0"; var dbnm4top = "0"; var dbnm4angle = "0"; playernumber2 = new fabric.Text(dbplnumber, { fontSize: dbnm4font, left: dbnm4left, top: dbnm4top, fill: $('#front_sold_color').val(), fontFamily: $('#number_ffamily').val(), stroke: $('#front_outline_color').val(), strokeWidth: dbnm4stroke, angle: dbnm4angle }); canvast.add(playernumber2);playernumber2.selectable=true; playernumber2.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); $('#down').click(function(){ $('#down').addClass('tsactive'); $('#straight').removeClass('tsactive'); $('#up').removeClass('tsactive'); canvast.remove(playernumber); PlayerName = $('#playernumber').val(); playernumber = new fabric.CurvedText(PlayerName,{ width: 100, height: 50, left: dbplayerleft, top: dbplayertop, textAlign: 'center', fontFamily: $('#scufontfamily').val(), fontWeight: 'normal', fill: $('#front_sold_color').val(), stroke: $('#front_outline_color').val(), radius: 100, fontSize: dbplayerfont, spacing: 7, reverse: true, angle: -5, }); canvast.add(playernumber); playernumber.selectable=true canvast.renderAll() updateControls(); playernumber.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); }); $('#up').click(function(){ $('#up').addClass('tsactive'); $('#straight').removeClass('tsactive'); $('#down').removeClass('tsactive'); canvast.remove(playernumber); PlayerName = $('#playernumber').val(); playernumber = new fabric.CurvedText(PlayerName,{ width: 100, height: 50, left: dbplayerleft, top: dbplayertop, fontFamily: $('#scufontfamily').val(), fontWeight: 'normal', fill: $('#front_sold_color').val(), stroke: $('#front_outline_color').val(), radius: 100, fontSize: dbplayerfont, spacing: 7, textAlign: 'center', reverse: false, angle: 7, }); canvast.add(playernumber); playernumber.selectable=true canvast.renderAll() updateControls(); playernumber.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); }); $('#straight').click(function(){ $('#straight').addClass('tsactive'); $('#up').removeClass('tsactive'); $('#down').removeClass('tsactive'); canvast.remove(playernumber); PlayerName = $('#playernumber').val(); playernumber = new fabric.Text(PlayerName, { fontSize: dbplayerfont, left: dbplayerleft, top: dbplayertop, fontFamily: $('#scufontfamily').val(), fontWeight: 'normal', fill: $('#front_sold_color').val(), stroke: $('#front_outline_color').val(), }); canvast.add(playernumber); playernumber.selectable=true canvast.renderAll() updateControls(); playernumber.on('selected', function() { $('#scufontfamily').val((this.get("fontFamily"))); }); }); $('#scufontcolor li').click(function() { var col = $(this).data('color'); $('#front_sold_color').val(col); if($('#showFront').hasClass('active')) { try { var selText = canvas.getActiveObject().getText(); if(isNaN(selText)) { canvas.getActiveObject().setFill(col); canvas.renderAll(); } else{ setNumberFillColor(col) } } catch(err) { } } if($('#showBack').hasClass('active')) { try { var selText = canvast.getActiveObject().getText(); if(isNaN(selText)) { canvast.getActiveObject().setFill(col); canvast.renderAll(); } else{ setNumberFillColor(col) } } catch(err) { } } backtcolor_change(col); }); function setNumberFillColor(col){ canvas.setActiveObject(playernumber3); canvas.getActiveObject().setFill(col); canvas.setActiveObject(playernumber4); canvas.getActiveObject().setFill(col); canvas.renderAll(); canvast.setActiveObject(playernumber2); canvast.getActiveObject().setFill(col); canvast.setActiveObject(playernumber5); canvast.getActiveObject().setFill(col); canvast.renderAll(); } function setNumberStrokeColor(col){ canvas.setActiveObject(playernumber3); canvas.getActiveObject().setStroke(col); canvas.setActiveObject(playernumber4); canvas.getActiveObject().setStroke(col); canvas.renderAll(); canvast.setActiveObject(playernumber2); canvast.getActiveObject().setStroke(col); canvast.setActiveObject(playernumber5); canvast.getActiveObject().setStroke(col); canvast.renderAll(); } function backtcolor_change(selected_color) { $('#scufontcolor li').each(function (indx, ele) { if($(ele).data('color') == selected_color) { $(ele).children('span').addClass('selected'); } else { $(ele).children('span').removeClass('selected'); } }); } $('#scufontocolor li').click(function() { var col = $(this).data('color'); $('#front_outline_color').val(col); if($('#showFront').hasClass('active')) { try { var selText = canvas.getActiveObject().getText(); if(isNaN(selText)) { canvas.getActiveObject().setStroke(col); canvas.renderAll(); } else{ setNumberStrokeColor(col) } } catch(err) { } } if($('#showBack').hasClass('active')) { try { var selText = canvast.getActiveObject().getText(); if(isNaN(selText)) { canvast.getActiveObject().setStroke(col); canvast.renderAll(); } else{ setNumberStrokeColor(col) } } catch(err) { } } backtocolor_change(col); }); function backtocolor_change(selected_color) { $('#scufontocolor li').each(function (indx, ele) { if($(ele).data('color') == selected_color) { $(ele).children('span').addClass('selected'); } else { $(ele).children('span').removeClass('selected'); } }); } function setNumberFontFamily(strFontFamily) { canvas.setActiveObject(playernumber3); canvas.getActiveObject().setFontFamily(strFontFamily); canvas.setActiveObject(playernumber4); canvas.getActiveObject().setFontFamily(strFontFamily); canvas.renderAll(); canvast.setActiveObject(playernumber2); canvast.getActiveObject().setFontFamily(strFontFamily); canvast.setActiveObject(playernumber5); canvast.getActiveObject().setFontFamily(strFontFamily); canvast.renderAll(); } document.getElementById('scufontfamily').onchange = function() { if($('#showFront').hasClass('active')) { try { var selText = canvas.getActiveObject().getText(); if(isNaN(selText)) { canvas.getActiveObject().setFontFamily(this.value); canvas.renderAll(); } else{ setNumberFontFamily(this.value); } } catch(err) { } } if($('#showBack').hasClass('active')) { try { var selText = canvast.getActiveObject().getText(); if(isNaN(selText)) { canvast.getActiveObject().setFontFamily(this.value); canvast.renderAll(); } else{ setNumberFontFamily(this.value); } } catch(err) { } } }; /******************************END***************************/ function hidesuccess() { document.getElementById('logosucess').style.display = "none"; } document.getElementById('frontlogos').onchange = function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { document.getElementById('logosucess').style.display = "inline"; var imgObj = new Image(); imgObj.src = event.target.result; imgObj.onload = function () { logo = new fabric.Image(imgObj); logo.set({left: 160,top: 80}); logo.scaleToWidth(100); canvas.add(logo); canvas.setActiveObject(logo); logo.selectable=true setTimeout(hidesuccess, 5000); } } reader.readAsDataURL(e.target.files[0]); document.getElementById('frontlogos'); } canvas.renderAll(); document.getElementById('backlogos').onchange = function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { document.getElementById('logosucess').style.display = "inline"; var imgObj = new Image(); imgObj.src = event.target.result; imgObj.onload = function () { logo = new fabric.Image(imgObj); logo.set({left: 160,top: 80}); logo.scaleToWidth(100); canvast.add(logo); canvast.setActiveObject(logo); logo.selectable=true setTimeout(hidesuccess, 5000); } } reader.readAsDataURL(e.target.files[0]); document.getElementById('backlogos'); } canvast.renderAll(); $(window).load(function(){ setTimeout(function(){ $( "#showFront" ).trigger( "click" ); }, 1500); $('#playernumber2').val(dbplnumber); $('#teamfront').val(dbteam); $('#playernumber').val(dbplayer); $x = $('#name_ffamily').val(); $('#teamfront').css("font-family",$x); $('#playernumber').css("font-family",$x); $y = $('#number_ffamily').val(); $('#playernumber2').css("font-family",$y); /*$('#mme a').css('color', ''); $('#mme').parent().css('border', '');*/ $v = $('#name_ffamily').val(); $('#scufontfamily').css("font-family",$v); var dbnff = $('#name_ffamily').val(); $("#scufontfamily > [value=" + dbnff + "]").attr("selected", "true"); }) $('#scufontfamily').change(function() { $('#teamfront').css("font-family", $(this).val()); $('#playernumber').css("font-family", $(this).val()); $('#scufontfamily').css("font-family", $(this).val()); }); } loadBaseShirts(); canvas.calcOffset();