Quando seus sonhos se tornam realidade

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.

Que maneira melhor que uma régua para fazer isso.

De primeira instancia fui no tio Google, mais infelizmente assim como outra dezena de coisa não encontrei nada.

pensei em usar imagens, mais ainda que usa-se um svg a vida ficaria complicada e sua representação ficaria distorcida.

A melhor solução que encontrei foi fazer uma régua com javascript (JQuery sempre dando uma ajudinha) e CSS.

Devo adimitir entre uma distância de 5 ~ 70cm ficou perfeita

Função JavaScript

function criarRegua(mm, id){
	var html = '';
	$('#'+id).css({height: '60px;', display: 'flex', width:'100%;'});
	var width = $('#'+id).width();
	var scale = width/mm;
	console.log(scale);
	html += '<div class="inter-number">';
	html += '<div class="cm-letter-inter"> </div>';
	for(var i = 5; i< mm; i++){
		if(i % 10 == 0){
			html += '<div class="cm-letter">';
			if(scale > 2){
				html += (i/10);
			}else{
				if(i % 20 == 0){
					html += (i/10);
				}
			}
			html += '</div>';
		}
	}


	html += '<div class="inter-regua">';
	for(var i = 0; i< mm; i++){
		if(i % 10 == 0){
			html += '<div class="cm"><div class="inter"></div></div>';
		}else if(i%5 == 0){
			html += '<div class="cm2"><div class="inter"></div></div>';
		}else{
			html += '<div class="mm"><div class="inter"></div></div>';
		}
	}
	html += '</div>';



	$('#'+id).html(html);

	$('.cm').css({width: (width/mm)+'px'});
	$('.cm2').css({width: (width/mm)+'px'});
	$('.mm').css({width: (width/mm)+'px'});
	if(scale < 1){
		$('.cm2 > .inter').css({background: 'none'});
	}
	if(scale < 2){
		$('.mm > .inter').css({background: 'none'});
	}
	$('.cm-letter-inter').css({width: (width/mm*5)+'px'});
	$('.cm-letter').css({width: (width/mm*10)+'px'});
}

CSS

	.cm{
		height: 30px;
		vertical-align: bottom;
		display: table-cell;
	}
	.cm .inter{
		width: 2px;
		height: 30px;
		background: #000;
		vertical-align: bottom;
	}
	
	.mm{
		height: 30px;
		vertical-align: bottom;
		display: table-cell;
	}
	.mm .inter{
		width: 1px;
		height: 15px;
		background: #333;
		vertical-align: bottom;
	}
	.cm2{
		height: 30px;
		vertical-align: bottom;
		display: table-cell;
	}
	
	.cm2 .inter{
		width: 1px;
		height: 20px;
		background: #333;
		vertical-align: bottom;
	}
	
	.cm-letter{
		height: 30px;
		vertical-align: bottom;
		display: table-cell;
		text-align: center;
	}
	
	.cm-letter-inter{
		height: 30px;
		vertical-align: bottom;
		display: table-cell;
		text-align: left;
	}

Depois disso é super fácil, é só criar a div onde voce quer que a régua apareça

<div id="regua"></div>​

E no final fazer a chamada da função

$(document).ready(function(){
    criarRegua(300, 'regua');
});

Importante! 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.