por: Wesley Belinato - 17 de Fevereiro de 2017
Um cliente de uma estamparia me pediu uma tarefa um pouco inusitada, queria as medidas das estampas no sistema de uma maneira que o cliente pudesse entender.
\rQue maneira melhor que uma régua para fazer isso.
\rDe primeira instancia fui no tio Google, mais infelizmente assim como outra dezena de coisa não encontrei nada.
\rpensei em usar imagens, mais ainda que usa-se um svg a vida ficaria complicada e sua representação ficaria distorcida.
\rA melhor solução que encontrei foi fazer uma régua com javascript (JQuery sempre dando uma ajudinha) e CSS.
\rDevo adimitir entre uma distância de 5 ~ 70cm ficou perfeita
\r\r
\r \r
Função JavaScript
\r\rfunction criarRegua(mm, id){\r var html = '';\r $('#'+id).css({height: '60px;', display: 'flex', width:'100%;'});\r var width = $('#'+id).width();\r var scale = width/mm;\r console.log(scale);\r html += '<div class="inter-number">';\r html += '<div class="cm-letter-inter"> </div>';\r for(var i = 5; i< mm; i++){\r if(i % 10 == 0){\r html += '<div class="cm-letter">';\r if(scale > 2){\r html += (i/10);\r }else{\r if(i % 20 == 0){\r html += (i/10);\r }\r }\r html += '</div>';\r }\r }\r\r\r html += '<div class="inter-regua">';\r for(var i = 0; i< mm; i++){\r if(i % 10 == 0){\r html += '<div class="cm"><div class="inter"></div></div>';\r }else if(i%5 == 0){\r html += '<div class="cm2"><div class="inter"></div></div>';\r }else{\r html += '<div class="mm"><div class="inter"></div></div>';\r }\r }\r html += '</div>';\r\r\r\r $('#'+id).html(html);\r\r $('.cm').css({width: (width/mm)+'px'});\r $('.cm2').css({width: (width/mm)+'px'});\r $('.mm').css({width: (width/mm)+'px'});\r if(scale < 1){\r $('.cm2 > .inter').css({background: 'none'});\r }\r if(scale < 2){\r $('.mm > .inter').css({background: 'none'});\r }\r $('.cm-letter-inter').css({width: (width/mm*5)+'px'});\r $('.cm-letter').css({width: (width/mm*10)+'px'});\r}\r
\rCSS
\r .cm{\r height: 30px;\r vertical-align: bottom;\r display: table-cell;\r }\r .cm .inter{\r width: 2px;\r height: 30px;\r background: #000;\r vertical-align: bottom;\r }\r \r .mm{\r height: 30px;\r vertical-align: bottom;\r display: table-cell;\r }\r .mm .inter{\r width: 1px;\r height: 15px;\r background: #333;\r vertical-align: bottom;\r }\r .cm2{\r height: 30px;\r vertical-align: bottom;\r display: table-cell;\r }\r \r .cm2 .inter{\r width: 1px;\r height: 20px;\r background: #333;\r vertical-align: bottom;\r }\r \r .cm-letter{\r height: 30px;\r vertical-align: bottom;\r display: table-cell;\r text-align: center;\r }\r \r .cm-letter-inter{\r height: 30px;\r vertical-align: bottom;\r display: table-cell;\r text-align: left;\r }
\r\r
Depois disso é super fácil, é só criar a div onde voce quer que a régua apareça
\r<div id="regua"></div>
\rE no final fazer a chamada da função
\r$(document).ready(function(){\r criarRegua(300, 'regua');\r});
\rImportante! Verifique se a div#regua ocupa 100% ou o valor desejado do espaço que voce deseja ocupar, se o valor que ela ocupa for de 0 porde causar problema.