'; document.getElementById('result').innerHTML = $text; document.getElementById('result2').innerHTML = $text; if(type != 'aj'){ for(var img_ca in tab_equip){ if(document.getElementById('c_'+img_ca)){ var canv = document.getElementById('c_'+img_ca); var ca = canv.getContext('2d'); var canv2 = document.getElementById(img_ca); ca.drawImage(canv2, 0, 0); } } }else{ for(var img_ca in tab_equi){ if(document.getElementById('c_'+img_ca)){ var canv = document.getElementById('c_'+img_ca); var ca = canv.getContext('2d'); var canv2 = document.getElementById(img_ca); ca.drawImage(canv2, 0, 0); } } } if(bordure){ for(var img_ca in tab_bordure){ if(document.getElementById('c_'+img_ca)){ var canv = document.getElementById('c_'+img_ca); var ca = canv.getContext('2d'); var canv2 = document.getElementById(img_ca); ca.drawImage(canv2, 0, 0); } } } } /* Crée l'image */ function make_image(){ c_img = context.getImageData(0,0,c.width,c.height); } /* Changement de type de dalle */ function changetype(t){ type = t; if(type == 'aj'){ // Affiche et cache les images document.getElementById('ajourees').style.visibility="visible"; document.getElementById('ajourees').style.display="block"; document.getElementById('pleines').style.visibility="hidden"; document.getElementById('pleines').style.display="none"; //change la taille des éléments size_dalle = 40; //récupère l'élément principal select('noir'); }else{ color_dallep(); document.getElementById('ajourees').style.visibility="hidden"; document.getElementById('ajourees').style.display="none"; document.getElementById('pleines').style.visibility="visible"; document.getElementById('pleines').style.display="block"; size_dalle = 50; select('Noir'); } // document.getElementById('bordure').checked = false; add_border(); changeinput2(); select(image_selected); validate(); } function changeinput2(){ if(type == 'aj'){ document.getElementById('longueur').value = document.getElementById('longueur').value*5/4; document.getElementById('largeur').value = document.getElementById('largeur').value*5/4; }else{ document.getElementById('longueur').value = document.getElementById('longueur').value*4/5; document.getElementById('largeur').value = document.getElementById('largeur').value*4/5; } } /* Ajouter bordure */ function add_border(){ if(document.getElementById('bordure').checked){ bordure = true; z = size_px; var cont_img = document.getElementById('myCanvas'); var cont = cont_img.getContext('2d'); var imgData = cont.getImageData(0,0,cont_img.width,cont_img.height); x2 = cont_img.width+z*2; y2 = cont_img.height+z*2; cont_img.width = x2; cont_img.height = y2; cont.putImageData(imgData,z,z); document.getElementById('img_bordures').style.visibility="visible"; document.getElementById('img_bordures').style.display="block"; }else{ bordure = false; var cont_img = document.getElementById('myCanvas'); var cont = cont_img.getContext('2d'); var imgData = cont.getImageData(z,z,cont_img.width-(z*2),cont_img.height-(z*2)); x2 = cont_img.width-z*2; y2 = cont_img.height-z*2; cont_img.width = x2; cont_img.height = y2; cont.putImageData(imgData,0,0); z = 0; document.getElementById('img_bordures').style.visibility="hidden"; document.getElementById('img_bordures').style.display="none"; } } /* crée les bordures */ function create_border(){ var canv_b = document.getElementById('bordure noir'); var ca_b = canv_b.getContext('2d'); col = tab_equi[canv_b.id.split('bordure ')[1]] ca_b.fillStyle = col; ca_b.fillRect(0,0,100,15); var canv_b = document.getElementById('bordure gris clair'); var ca_b = canv_b.getContext('2d'); col = tab_equi[canv_b.id.split('bordure ')[1]] ca_b.fillStyle = col; ca_b.fillRect(0,0,100,15); var canv_b = document.getElementById('bordure gris foncé'); var ca_b = canv_b.getContext('2d'); col = tab_equi[canv_b.id.split('bordure ')[1]] ca_b.fillStyle = col; ca_b.fillRect(0,0,100,15); /* crée les angles */ var canv_b = document.getElementById('angle noir'); var ca_b = canv_b.getContext('2d'); ca_b.fillStyle = tab_equi[canv_b.id.split('angle ')[1]] ca_b.beginPath(); ca_b.moveTo(0,0); ca_b.arc(0,0,15,0,Math.PI/2); ca_b.lineTo(0,0); ca_b.fill(); var canv_b = document.getElementById('angle gris clair'); var ca_b = canv_b.getContext('2d'); ca_b.fillStyle = tab_equi[canv_b.id.split('angle ')[1]] ca_b.beginPath(); ca_b.moveTo(0,0); ca_b.arc(0,0,15,0,Math.PI/2); ca_b.lineTo(0,0); ca_b.fill(); var canv_b = document.getElementById('angle gris foncé'); var ca_b = canv_b.getContext('2d'); ca_b.fillStyle = tab_equi[canv_b.id.split('angle ')[1]] ca_b.beginPath(); ca_b.moveTo(0,0); ca_b.arc(0,0,15,0,Math.PI/2); ca_b.lineTo(0,0); ca_b.fill(); } var image_selected = 'noir'; document.getElementById(image_selected).style.border = '2px solid blue'; var x = 20; var y = 20; var z = 0; var size_px = 100; var size_dalle = 40; var type = 'aj'; var img_bord = null; var img_angle = null; var mat = new Array(); mat_bordure = new Array(); var mat_angle = new Array(); let mouse_down = false; var dam = true; var bordure = true; var tab_equi = { 'noir' : 'black', 'rouge' : '#bf0b0b', 'jaune' : ' #f7fa2f', 'orange' : '#eb9834', 'blanc' : 'white', 'bleu foncé' : '#0c179c', 'bleu ciel' : '#58bbf5', 'vert fusion' : '#a0f241', 'violet' : '#9b2aa3', 'vert' : '#21d800', 'gris foncé' : '#656966', 'gris clair' : '#c0c2c1', } var tab_equi2 = { 'noir1' : '#262626', 'noir2' : '#706c6c', 'rouge1' : '#ba1414', 'rouge2' : '#f21b1b', 'jaune1' : '#e2e622', 'jaune2' : '#f7f7aa', 'orange1' : '#e8711c', 'orange2' : '#ffbb4d', 'blanc1' : '#dbdbdb', 'blanc2' : '#f7f7f7', 'bleu foncé1' : '#1a038f', 'bleu foncé2' : '#340cf7', 'bleu ciel1' : '#58bbd6', 'bleu ciel2' : '#64d6f5', 'vert fusion1' : '#8fe002', 'vert fusion2' : '#a0fa05', 'vert1' : '#10a60d', 'vert2' : '#00cc07', 'violet1' : '#8a0694', 'violet2' : '#be48c7', 'gris foncé1' : '#666060', 'gris foncé2' : '#968d8d', 'gris clair1' : '#c6c4c4', 'gris clair2' : '#eae8e8', } var tab_equip = { 'Rouge' : '#D80E11', 'Noir' : 'black', 'Bleu' : '#0c179c', 'Blanc' : 'white', 'Orange' : '#fc7f10', 'Jaune' : 'yellow', 'Gris foncé' : '#474444', 'Gris clair' : '#b2b0b0', } /***** CANVAS *****/ var c = document.getElementById("myCanvas"); var context = c.getContext("2d"); document.getElementById('form').addEventListener("submit",function(e){ e.preventDefault(); validate(); }); /* enregistrer le canvas */ download_img = function(el) { var imageURI = document.getElementById("myCanvas").toDataURL("image/jpg"); document.getElementById('download').href = imageURI; el.href = imageURI; }; /* Dalles pleines */ var type = 'aj'; document.getElementById('pleines').style.visibility="hidden"; document.getElementById('pleines').style.display="none"; rempli_tab_contour(); rempli_tab(); make_mat(); make_mat_angle(); make_mat_bordure(); make_img_canvas(); create_canvas(); create_border(); validate();