Criador de Assinatura — Desenhe Sua Assinatura Online

O que este criador de assinatura realmente faz

A área de desenho é um canvas HTML escutando eventos de ponteiro, então um único caminho de código atende mouse, trackpad, dedo e caneta sensível à pressão. Cada amostra que seu dispositivo reporta é registrada com sua posição e seu instante e, em digitalizadores de alta taxa de atualização, as amostras extras que se acumulam entre dois quadros de animação também são recuperadas da lista de eventos agrupados — um floreio rápido é capturado na taxa que o hardware produziu, não na taxa em que a tela redesenha. Essas amostras brutas nunca são ligadas por linhas retas. Cada ponto amostrado vira o ponto de controle de uma curva de Bézier quadrática, e a curva passa pelos pontos médios entre amostras vizinhas. Essa construção por pontos médios é o que faz o resultado se ler como caligrafia, e não como o traço de um sismógrafo, e como cada pedaço começa exatamente onde o anterior terminou, um traço não tem emendas visíveis. A espessura varia ao longo do traço. Se o seu dispositivo reporta pressão que realmente muda, um Apple Pencil ou a caneta de uma mesa digitalizadora, por exemplo, essa leitura controla a largura da linha diretamente. Mouses reportam um valor constante de 0,5 e muitas telas sensíveis ao toque reportam um valor fixo para sempre, então a presença de um campo de pressão não prova nada; a ferramenta só confia na pressão quando ela de fato varia durante um traço e, caso contrário, recorre à velocidade do ponteiro, desenhando curvas lentas e deliberadas mais grossas e movimentos rápidos mais finos, entre 40 e 160 por cento da espessura de caneta que você escolheu. Cada largura é filtrada em relação à anterior, para que uma única amostra trêmula não deixe um caroço na linha. No download, os traços são renderizados de novo fora da tela, com o triplo do tamanho da área de desenho, sobre um canvas totalmente transparente; o canal alfa de cada pixel é varrido para encontrar a caixa delimitadora da tinta, e a imagem é recortada nessa caixa mais a margem que você escolheu. O PNG mantém seu canal alfa; a opção JPG pinta o recorte sobre branco antes, porque o JPEG não tem transparência alguma. Os traços vivem apenas na memória da página — nada é enviado, e recarregar a aba os descarta.