Crie um layout de marca d'água repetida em mosaico

Crie uma grade completa de marcas d'água repetidas sem estimar quantas cópias são necessárias além das bordas visíveis. Informe as dimensões da tela e do bloco, os espaçamentos horizontal e vertical e o ângulo de rotação. A calculadora retorna coordenadas centrais estáveis para cada bloco girado que toca a tela, inclusive blocos parciais nas bordas. O layout fica centralizado, usa identificadores consistentes de linha e coluna e pode ser enviado diretamente a um fluxo de renderização de imagem, SVG, PDF ou Canvas.

Defina a tela e o bloco da marca d'água

Comece com a largura e a altura da tela de destino e, em seguida, informe a largura e a altura sem rotação de um bloco de marca d'água. Todas as dimensões usam a mesma unidade, geralmente pixels, mas também podem usar pontos ou outra unidade de coordenadas quando o renderizador adota um sistema diferente. O bloco precisa caber na tela nas duas dimensões.

Essa validação detecta trocas acidentais, conversões incorretas de unidade e solicitações que produziriam um único carimbo grande demais em vez de um padrão repetido. Depois, defina os espaçamentos horizontal e vertical. Esses valores são lacunas entre as bordas dos blocos ao longo dos próprios eixos da grade, não distâncias absolutas na tela após a rotação.

Zero posiciona os blocos lado a lado; valores maiores deixam o padrão mais leve e com mais espaço vazio. A origem retornada é o centro da tela. A linha zero e a coluna zero identificam o bloco centralizado nessa origem, fornecendo ao seu código uma âncora estável mesmo quando dimensões, espaçamento ou ângulo mudarem.

Entenda a rotação e a cobertura das bordas

O ângulo gira toda a malha no sentido horário em torno do centro da tela. Qualquer valor finito em graus é aceito e normalizado para uma volta, portanto menos trinta graus e trezentos e trinta graus geram o mesmo layout. A rotação amplia a região que a grade precisa cobrir: um bloco cujo centro está fora da imagem ainda pode ter um canto visível dentro dela.

Por isso, a calculadora projeta a tela nos eixos girados da grade, cria um conjunto limitado de linhas e colunas candidatas e testa cada retângulo girado contra o retângulo da tela. Uma posição é retornada quando esses retângulos se tocam ou se sobrepõem. Essa regra exata de interseção evita lacunas nos cantos e não emite blocos distantes que uma caixa delimitadora superdimensionada incluiria.

As coordenadas representam centros porque bibliotecas raster, transformações SVG e CSS e APIs Canvas aceitam de forma consistente a rotação central. Blocos parciais nas bordas são intencionais; deixe o renderizador de destino recortá-los na tela.

Renderize e reproduza o layout

Processe as posições na ordem retornada, dos identificadores de linha menores para os maiores e, em seguida, das colunas menores para as maiores. Os identificadores de linha e coluna ajudam na depuração, na alternância de opacidade ou na seleção de blocos intercalados, mas não substituem as coordenadas. As coordenadas numéricas são arredondadas para seis casas decimais, mantendo o resultado serializado estável e preservando a precisão subpixel em saídas de alta resolução.

Se você precisar de padrão escalonado, variação aleatória, marcas com rotações individuais ou medição de texto, aplique essas transformações depois de receber a grade regular ou utilize um compositor especializado.