Cree un diseño de marca de agua repetida en mosaico
Una imagen de 300×200 con piezas de 100×50, espacios de 20 y 10 y una inclinación de 30° necesita 15 posiciones, incluidas las piezas parciales del borde. Indique lienzo, pieza, espacios y ángulo para obtener el centro de cada copia. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Ancho del lienzo
- 300
- Alto del lienzo
- 200
- Ancho de la baldosa
- 100
- Alto del mosaico
- 50
- Espaciado X
- 20
- Espaciado Y
- 10
- Cantidad
- 15
Cree una cuadrícula completa de marcas de agua repetidas sin adivinar cuántas copias hacen falta más allá de los bordes visibles. Indique las dimensiones del lienzo y del mosaico, los espacios horizontal y vertical y el ángulo de giro. La calculadora devuelve coordenadas centrales estables para cada mosaico girado que toca el lienzo, incluidos los fragmentos de los bordes. El diseño queda centrado y puede enviarse directamente a un flujo de renderizado de imágenes, SVG, PDF o Canvas.
Defina el lienzo y el mosaico de la marca de agua
Comience con la anchura y la altura del lienzo de destino y, después, indique la anchura y la altura sin girar de un mosaico de marca de agua. Todas las dimensiones deben emplear la misma unidad, normalmente píxeles, aunque también pueden ser puntos u otra unidad de coordenadas si su renderizador utiliza un sistema distinto. El mosaico debe caber en el lienzo en ambas dimensiones.
Esta validación detecta intercambios accidentales, conversiones de unidades incorrectas y solicitudes que producirían un único sello desmesurado en vez de un patrón repetido. A continuación, establezca los espacios horizontal y vertical. Son las separaciones entre los bordes de los mosaicos a lo largo de los ejes propios de la cuadrícula, no distancias absolutas en pantalla después del giro.
Cero coloca los mosaicos borde con borde; los valores mayores crean un patrón más ligero. El origen devuelto es el centro del lienzo. La fila cero y la columna cero identifican el mosaico centrado en ese origen y ofrecen a su código una referencia estable cuando cambian las dimensiones, el espacio o el ángulo.
Comprenda el giro y la cobertura de los bordes
El ángulo gira toda la retícula en sentido horario alrededor del centro del lienzo. Se acepta cualquier valor finito en grados y se normaliza a una vuelta, de modo que menos treinta grados y trescientos treinta grados generan el mismo diseño. El giro amplía la región que debe cubrir la cuadrícula: un mosaico cuyo centro está fuera de la imagen todavía puede mostrar una esquina dentro de ella.
Por eso, la calculadora proyecta el lienzo sobre los ejes girados, crea un conjunto acotado de filas y columnas candidatas y compara cada rectángulo de mosaico girado con el rectángulo del lienzo. Devuelve una posición cuando ambos se tocan o se superponen. Esta regla exacta de intersección evita perder mosaicos en las esquinas y evita emitir mosaicos lejanos que incluiría una caja envolvente sobredimensionada.
Los mosaicos parciales son intencionados: deje que el renderizador los recorte al lienzo.
Renderice y reproduzca el diseño
Procese las posiciones en el orden devuelto: primero los identificadores de fila de menor a mayor y, dentro de cada fila, las columnas de menor a mayor. Los identificadores de fila y columna sirven para depurar, alternar opacidad o seleccionar mosaicos intercalados, pero no sustituyen las coordenadas. Estas se redondean a seis decimales para que los resultados serializados permanezcan estables sin perder precisión subpíxel en salidas de alta resolución.
Si necesita un patrón escalonado, variación aleatoria, giros individuales o medición de texto, aplique esas transformaciones después de recibir la cuadrícula regular o use un compositor especializado.
Qué puede hacer con ella
Proteja imágenes de vista previa
Repita un logotipo sobre vistas previas de productos, pruebas o portafolios para que un solo recorte no elimine todas las marcas.
Genere instrucciones de renderizado
Obtenga centros estables para Canvas, SVG, PDF o flujos de imagen del servidor sin duplicar las matemáticas del diseño.
Mantenga exportaciones coherentes
Reutilice las mismas reglas de ángulo y espacio con varios tamaños de lienzo y conserve un patrón centrado y determinista.
Preguntas frecuentes
¿Las coordenadas x e y son esquinas o centros?
Son los centros de los mosaicos. Gire y dibuje cada marca de agua alrededor de ese punto con el ángulo devuelto.
¿Por qué algunos centros están fuera del lienzo?
Un mosaico girado puede cortar el lienzo aunque su centro esté fuera. Esas posiciones cubren bordes y esquinas y deben recortarse al renderizar.
¿En qué dirección se aplica el ángulo?
Los ángulos positivos giran en sentido horario en el sistema habitual de imagen, donde x crece hacia la derecha e y hacia abajo.
¿Puede ser cero el espacio?
Sí. Cero hace que los bordes vecinos se toquen sobre ese eje de la cuadrícula. El espacio no puede ser negativo.
¿Puede la pieza de la marca de agua ser más grande que la imagen?
No. La pieza debe caber dentro del lienzo en las dos direcciones. Esa regla detecta un ancho y un alto intercambiados, una conversión de unidades equivocada o un pedido que daría un único sello enorme en vez de un patrón repetido.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/image/watermark-tile-repeat-layout \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"canvas_width":800,"canvas_height":600,"tile_width":160,"tile_height":80,"spacing_x":40,"spacing_y":30,"angle_deg":-30}'const res = await fetch("https://api.kit.forhosting.com/image/watermark-tile-repeat-layout", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"canvas_width": 800,
"canvas_height": 600,
"tile_width": 160,
"tile_height": 80,
"spacing_x": 40,
"spacing_y": 30,
"angle_deg": -30
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/watermark-tile-repeat-layout",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"canvas_width": 800,
"canvas_height": 600,
"tile_width": 160,
"tile_height": 80,
"spacing_x": 40,
"spacing_y": 30,
"angle_deg": -30
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/watermark-tile-repeat-layout", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"canvas_width":800,"canvas_height":600,"tile_width":160,"tile_height":80,"spacing_x":40,"spacing_y":30,"angle_deg":-30}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"canvas_width":800,"canvas_height":600,"tile_width":160,"tile_height":80,"spacing_x":40,"spacing_y":30,"angle_deg":-30}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/watermark-tile-repeat-layout", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"canvas_width": 800,
"canvas_height": 600,
"tile_width": 160,
"tile_height": 80,
"spacing_x": 40,
"spacing_y": 30,
"angle_deg": -30
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.watermark_tile_repeat_layout",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
max_mb | 15 |
max_megapixels | 12 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Comprenda el giro y la cobertura de los bordes
Las coordenadas representan centros porque las bibliotecas ráster, las transformaciones SVG y CSS y las API de Canvas admiten de forma coherente el giro desde el centro.
Renderice y reproduzca el diseño
Para cada registro, sitúe el centro de la marca en center_x y center_y, gírela angle_deg alrededor de ese punto y dibújela con la anchura y la altura indicadas. El algoritmo no utiliza desplazamientos aleatorios, reloj, estado guardado ni recursos de red; entradas idénticas siempre producen el mismo JSON. El precio de la API es $0.002 por cálculo, con independencia del número de posiciones que no supere el límite de seguridad.
Preguntas técnicas
¿Cuánto cuesta la llamada a la API?
Cada cálculo cuesta $0.002. El resultado contiene la lista completa de posiciones dentro del límite de seguridad documentado.
¿Qué ocurre si el mosaico supera el lienzo?
La solicitud devuelve un error invalid_input porque un mosaico repetido no puede superar la anchura ni la altura del lienzo.