Documentacao
Como usar o MetricCanvas
O MetricCanvas permite que voce meca distancias reais em qualquer imagem — plantas, fotos de ambientes, blueprints, mapas ou desenhos tecnicos — diretamente no seu navegador. Sem instalacao, sem conta, seus dados nunca saem do seu dispositivo.
Antes de comecar
Tudo o que voce precisa e uma imagem que contenha pelo menos uma distancia que ja conheca — a largura de uma porta, o comprimento de um ambiente, uma barra de escala impressa, qualquer coisa com uma medida real conhecida. Essa referencia permite ao MetricCanvas derivar todas as outras distancias da mesma imagem com precisao.
Formatos suportados: JPEG, PNG, WebP, GIF, BMP e TIFF. Nao ha limite de tamanho de arquivo imposto pela ferramenta em si, embora arquivos muito grandes possam carregar mais lentamente dependendo do seu dispositivo.
Passo 1 — Envie sua imagem
Clique na area de upload na barra lateral esquerda ou arraste e solte uma ou mais imagens diretamente na tela. O MetricCanvas suporta multiplas imagens ao mesmo tempo, cada uma colocada em sua propria camada na tela infinita.
Uma vez enviadas, voce pode se deslocar pela tela clicando e arrastando (ou usando a ferramenta Pan da barra de ferramentas), e dar zoom com a roda do mouse ou os botoes de zoom. As imagens podem ser reposicionadas livremente — a tela nao tem bordas fixas.
Se voce estiver trabalhando com uma digitalizacao de alta resolucao, de zoom na area onde voce desenhara sua linha de calibracao antes de calibrar. Quanto mais preciso for seu clique de calibracao, mais exatas serao todas as medicoes derivadas.
Passo 2 — Calibre a escala
A calibracao e o passo chave. Selecione a ferramenta Calibrar da barra de ferramentas, depois clique em dois pontos da imagem que correspondam a uma distancia real conhecida. Uma caixa de dialogo pedira que voce insira essa distancia e escolha sua unidade (metros, centimetros, pes, polegadas ou qualquer unidade personalizada).
Voce tem dois modos de calibracao:
- Linha — clique nos dois extremos de um segmento reto cujo comprimento voce conheca. Ideal para paredes, corredores e elementos lineares.
- Diametro — clique nos dois extremos do diametro de um objeto circular. Util para tubos, colunas ou qualquer elemento circular de tamanho conhecido.
Depois de salvar, a escala e estabelecida. O MetricCanvas usara essa referencia para converter distancias em pixels em valores reais para cada medicao subsequente sobre essa imagem.
Dica: Use a referencia identificavel mais longa que voce puder encontrar na imagem. Uma linha de referencia de 10 m sera mais precisa do que uma de 0,5 m, porque pequenos erros na colocacao do clic tem um efeito proporcionalmente menor.
Passo 3 — Meça distancias
Selecione a ferramenta Medir e clique em dois pontos da imagem. O MetricCanvas desenha uma linha entre eles, calcula a distancia real com base na sua calibracao e exibe o resultado como um rotulo diretamente na tela.
Voce pode adicionar tantas medicoes quanto necessario. Cada uma e listada no painel de Medicoes na barra lateral, onde voce pode renomea-la para algo descritivo (por exemplo, "Largura cozinha" ou "Corredor ate porta quarto").
Os rotulos podem ser reposicionados mudando para a ferramenta Selecionar e arrastando. Se voce precisar remeditar algo, simplesmente exclua a medicao antiga da barra lateral e desenhe uma nova.
Passo 4 — Gerencie camadas
Cada imagem que voce envia se torna uma camada separada. O painel Camadas na barra lateral mostra todas as camadas da sessao atual. Voce pode alternar a visibilidade de cada camada e reordena-las arrastando.
As camadas sao uteis quando voce deseja sobrepor multiplas imagens — por exemplo, uma planta ao lado de uma foto de referencia do mesmo espaco — ou ao comparar diferentes versoes do mesmo desenho.
Passo 5 — Exporte seu trabalho
Quando voce terminar de medir, o painel Exportar oferece tres formatos de saida:
- PNG — exporta toda a tela como uma imagem anotada em resolucao completa, incluindo todas as linhas de medicao e rotulos. Util para compartilhar com colegas ou incluir em relatorios.
- CSV — exporta todas as medicoes como uma tabela compativel com planilhas, com colunas para rotulo, distancia em pixels, valor real e unidade. Ideal para importacao no Excel, Google Sheets ou qualquer pipeline de dados.
- TXT — exporta as medicoes como texto simples, uma por linha. Util para notas rapidas ou para colar em um documento.
Todas as exportacoes sao geradas inteiramente no seu navegador. Nada e enviado para nenhum servidor.
Desfazer, refazer e persistencia de sessao
O MetricCanvas mantem um historico completo de desfazer/refazer durante sua sessao. Use os botoes Desfazer e Refazer na barra de ferramentas ou os atalhos de teclado padrao (Ctrl+Z / Ctrl+Y no Windows, Cmd+Z / Cmd+Shift+Z no Mac).
Sua sessao e salva automaticamente no armazenamento local do seu navegador. Quando voce reabrir a ferramenta no mesmo navegador no mesmo dispositivo, sua sessao sera restaurada automaticamente. Limpar os dados do site do navegador eliminara a sessao salva.
Para comecar do zero, use o botao Redefinir tela. Isso limpa todas as camadas e medicoes da sessao atual.
Trabalhar com multiplas imagens
Voce pode enviar varias imagens em uma sessao e mante-las organizadas na mesma tela. Cada imagem tem sua propria camada e pode ter sua propria calibracao. Isso e util quando voce trabalha com imagens em diferentes escalas — por exemplo, uma planta de sitio e uma planta detalhada de uma unidade.
As medicoes sao sempre desenhadas na camada atualmente ativa. Certifique-se de selecionar a camada correta antes de medir se voce tem varias imagens abertas.
Como funciona a matematica
O MetricCanvas usa uma proporcao simples: uma vez que voce estabelece uma escala a partir de uma referencia conhecida, qualquer distancia em pixels na imagem pode ser convertida em um valor real. A formula principal e:
escala = distancia_real ÷ distancia_pixelsOnde distancia_pixels e a distancia euclidiana entre seus dois cliques de calibracao:
distancia_pixels = √((x₂ − x₁)² + (y₂ − y₁)²)Cada medicao subsequente segue o mesmo padrao:
distancia_real = √((x₂ − x₁)² + (y₂ − y₁)²) × escalaIsso significa que a escala se propaga linearmente: se uma parede calibra a imagem, qualquer outra distancia — portas, janelas, diagonais — deriva da mesma proporcao. A ferramenta nao requer recalibracao para cada medicao. Uma boa referencia desbloqueia a imagem inteira.
Exemplo pratico: Voce tem uma planta e sabe que a parede da sala de estar a esquerda mede 4,5 m. Voce clica em ambas as extremidades dessa parede ao calibrar e mede 310 pixels entre elas. A escala fica 4,5 ÷ 310 ≈ 0,0145 m/px. Se voce medir um corredor e obtiver 220 pixels, o comprimento real e 220 × 0,0145 ≈ 3,19 m — sem saber mais nada sobre a planta.
O mesmo principio se aplica a fotografias. Se voce conhece um objeto em uma foto de ambiente (por exemplo, uma porta padrao mede 2,1 m de altura), voce pode calibrar contra ele e depois medir a largura de uma janela, o comprimento de um sofa ou a distancia entre duas paredes — tudo a partir de uma unica foto tirada de qualquer angulo, desde que todos os objetos medidos estejam aproximadamente no mesmo plano.
Para calibracao circular (modo diametro), a formula e identica — o MetricCanvas simplesmente calcula a distancia entre os dois pontos diametralmente opostos em que voce clicou e depois aplica a mesma proporcao. Isso e util para colunas, tubos, mesas redondas ou qualquer referencia circular de diametro conhecido.
Exemplo real: saber tudo a partir de uma parede
Suponha que voce recebeu uma planta em formato JPEG, mas ela nao tem escala impressa, e voce so sabe uma coisa: o quarto principal tem 3,6 m de largura. Veja como derivar qualquer outra medida do imovel:
A partir deste ponto, o MetricCanvas pode dizer: a largura total do apartamento, o comprimento da cozinha, a largura do corredor, a distancia de uma janela a uma parede, a diagonal de qualquer ambiente. Cada medicao deriva da unica referencia de 3,6 m. Voce pode exportar a imagem anotada completa ou a tabela de dados para compartilhar com um arquiteto, contratado ou qualquer outra pessoa que precise dos numeros.
Isso funciona porque as plantas sao projecoes ortograficas — todas as distancias sao desenhadas em escala em uma vista 2D plana. O mesmo principio se aplica a qualquer desenho corretamente projetado: plantas de sitio, elevacoes, esquemas eletricos, etc.
Dicas para resultados precisos
- Use a versao de maior resolucao da sua imagem. Mais pixels entre dois pontos significa menos erro de arredondamento na medicao.
- De o maximo de zoom possivel ao colocar os pontos de calibracao e medicao — um clic deslocado 2 pixels importa muito mais em zoom baixo do que em zoom alto.
- Escolha uma referencia de calibracao paralela a direcao em que voce vai medir majoritariamente. Uma referencia horizontal e ideal para medicoes horizontais.
- Para plantas com barra de escala impressa, calibre contra essa barra em vez de uma parede, pois as barras de escala impressas levam em conta a distorcao do desenho e a inclinacao da digitalizacao.
- Se sua imagem e uma fotografia tirada em angulo (em vez de uma vista ortografica verdadeira), as medicoes so serao exatas dentro do plano da superficie fotografada. A distorcao por perspectiva nao pode ser corrigida sem pontos de referencia adicionais.
