Sua imagem.Sua criação.
Edição visual com ferramentas reunidas em um só lugar.
Editor de imagem de computador: seleção, ajustes de cor, texto, formas, camadas e exportação a partir de uma foto.Editor de imagem: ajustes, texto, formas e camadas.
- Tauri
- React
- Fabric.js
- Rust
Sua imagem.Sua criação.
Edição visual com ferramentas reunidas em um só lugar.
- Tauri
- React
- Fabric.js
- Rust
Editor de imagem de computador: seleção, ajustes de cor, texto, formas, camadas e exportação a partir de uma foto.Editor de imagem: ajustes, texto, formas e camadas.
- Tauri
- React
- Fabric.js
- Rust
Réguas, guias e encaixe
Chegou perto, encaixou.
Alinhar elementos à mão cansa e nunca fica exato. O editor ajuda: quando a borda ou o centro de um objeto chega perto de uma guia ou de outro objeto, ele pula para o lugar e mostra a linha. Arraste os blocos, puxe guias novas das réguas e veja o encaixe acontecer.
A prancheta
Arraste os blocos. Puxe uma guia da régua de cima ou da lateral; solte-a sobre a régua para apagar. Com o bloco escolhido, as setas movem 1 px (Shift, 10). Segure Alt para soltar sem encaixar.
O que encaixou
- Bloco 1
- x 70 · y 70
- Distância de encaixe (na tela)
- 8 px
- Guias (1)
- x 300
As regras são as do editor (guias.ts): o objeto que se move oferece 3 pontos por eixo, esquerda, centro e direita; topo, meio e base. Os alvos são as guias e as bordas e o centro dos outros objetos. Vale a menor distância, até 8 px da tela (por isso o encaixe é o mesmo com a prancheta grande ou pequena); no empate, a guia ganha, porque foi posta de propósito. A régua tem 22 px e põe um número a cada ~70 px de tela, arredondado para 1, 2 ou 5 vezes uma potência de 10. Não existe grade.
Ajuste. Recorte. Transforme.
Cor, seleção e elementos para trabalhar cada detalhe.
Uma prévia que mostra uma cor e um arquivo salvo com outra é o pior defeito de um editor. Aqui, a prévia e o resultado final usam a mesma conta, escrita duas vezes, no navegador do app e no motor em Rust. Mexa nos ajustes: à esquerda, essa conta; à direita, o filtro nativo do navegador.
Lado a lado
Filtros e ajustes
brilho 1 · contraste 1 · inverter 0 saturação 1 · matiz 0° · sépia 0
A conta é a do editor (ajustes.ts, e a mesma em ajustes.rs): uma tabela de 256 entradas para brilho, contraste e negativo, e depois uma matriz 3 × 3 para saturação, matiz e sépia, com os pesos 0,213 / 0,715 / 0,072 da especificação de filtros do navegador. Os filtros prontos são combinações exatas: Sépia = sépia 1 e saturação 0,85; Frio = matiz −14° e saturação 1,1; Quente = matiz +14°, saturação 1,12 e brilho 1,03. A prévia roda no tamanho da tela e o "Aplicar" roda em Rust, no tamanho real. A foto é da BabyShoes.
Da ideia ao arquivo final.
Camadas, histórico e exportação num fluxo visual.
Um recorte bem feito tem borda macia, com centenas de níveis de transparência, e um formato errado joga tudo isso fora sem avisar. O editor conta os níveis antes e depois de exportar e avisa quando o formato vai estragar o recorte. Mude a suavidade da borda e troque o formato.
O recorte
O formato
Pouca transparência (128 níveis ou menos): o app nem avisa.
Simulado com os 83 níveis que o próprio app mediu para o PNG indexado.
| PNG | 177,7 KB | 255 níveis |
| WebP | 30,2 KB | 255 níveis |
| WebP sem perda | 70,3 KB | 255 níveis |
| PNG indexado | 32,4 KB | 83 níveis |
| JPEG | 27,1 KB | 1 nível |
As telas de verdade
As regras são as do editor (imagem.rs e PainelExportar.tsx): conta os níveis distintos de transparência e quanto da imagem tem transparência entre 9 e 246 (a borda suave). Com mais de 128 níveis, avisa: PNG e WebP mantêm, PNG indexado reduz, JPEG e PDF achatam sobre a cor de fundo. A tabela é a medição do próprio app, num recorte de 255 níveis. Aqui, PNG, WebP e JPEG passam pelo codificador do seu navegador, então os tamanhos variam um pouco dos do app. O PDF do app é uma imagem numa página A4.
As tecnologias
Do que é feito, peça por peça
Um editor de imagem de computador em duas metades: a tela, em React com o Fabric.js desenhando texto, formas e seleção por cima da foto, e um motor em Rust que guarda os pixels, faz os ajustes no tamanho real, o histórico e a exportação. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.
8tecnologias, em 2 camadas
A tela
O motor
Ferramentas para criação e desenvolvimentoProject Launcher