Crei un layout di filigrana ripetuta a mosaico
Un'immagine di 300×200 con tessere di 100×50, spaziature di 20 e 10 e un'inclinazione di 30° richiede 15 posizioni, tessere parziali del bordo comprese. Inserisca tela, tessera, spaziature e angolo per avere il centro di ogni copia. Gratis nel suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Larghezza della tela
- 300
- Altezza della tela
- 200
- Larghezza della piastrella
- 100
- Altezza del riquadro
- 50
- Spaziatura X
- 20
- Spaziatura Y
- 10
- Quantità
- 15
Crei una griglia completa di filigrane ripetute senza stimare quante copie servano oltre i bordi visibili. Indichi le dimensioni della tela e della tessera, le spaziature orizzontale e verticale e l’angolo di rotazione. Il calcolatore restituisce coordinate centrali stabili per ogni tessera ruotata che tocca la tela, incluse quelle parziali ai bordi. Il layout è centrato, utilizza identificatori coerenti di riga e colonna e può essere passato direttamente a una pipeline di rendering di immagini, SVG, PDF o Canvas.
Definisca la tela e la tessera della filigrana
Inizi dalla larghezza e dall’altezza della tela di destinazione, quindi fornisca la larghezza e l’altezza non ruotate di una tessera della filigrana. Tutte le dimensioni usano la stessa unità, in genere pixel, ma possono essere punti o un’altra unità di coordinate quando il motore di rendering adotta un sistema diverso. La tessera deve rientrare nella tela in entrambe le dimensioni.
Questa convalida individua scambi accidentali, conversioni di unità errate e richieste che produrrebbero un unico timbro sovradimensionato invece di un motivo ripetuto. Imposti poi le spaziature orizzontale e verticale. Questi valori sono gli intervalli tra i bordi delle tessere lungo gli assi propri della griglia, non distanze assolute sullo schermo dopo la rotazione.
Zero dispone le tessere bordo contro bordo, mentre valori maggiori creano un motivo più leggero. L’origine restituita è il centro della tela. La riga zero e la colonna zero identificano la tessera centrata su tale origine e forniscono al Suo codice un riferimento stabile anche quando cambiano dimensioni, spaziatura o angolo.
Comprenda la rotazione e la copertura dei bordi
L’angolo ruota l’intero reticolo in senso orario attorno al centro della tela. È accettato qualsiasi valore finito in gradi, normalizzato a un giro; pertanto meno trenta gradi e trecentotrenta gradi producono lo stesso layout. La rotazione amplia la regione da coprire: una tessera con il centro fuori dall’immagine può avere ancora un angolo visibile al suo interno.
Il calcolatore proietta quindi la tela sugli assi ruotati della griglia, crea un insieme limitato di righe e colonne candidate e verifica ogni rettangolo ruotato rispetto al rettangolo della tela. Una posizione viene restituita quando i due rettangoli si toccano o si sovrappongono. Questa regola esatta di intersezione evita tessere mancanti agli angoli e tessere lontane che una semplice cornice sovradimensionata includerebbe.
Le tessere parziali ai bordi sono intenzionali; lasci che il renderer di destinazione le ritagli sulla tela.
Esegua il rendering e riproduca il layout
Elabori le posizioni nell’ordine restituito, dagli identificatori di riga più bassi ai più alti e poi dalle colonne più basse alle più alte. Gli identificatori di riga e colonna sono utili per il debug, per alternare l’opacità o selezionare tessere alterne, ma non sostituiscono le coordinate. I valori numerici sono arrotondati a sei decimali, così i risultati serializzati restano stabili pur conservando precisione subpixel nelle uscite ad alta risoluzione.
Se Le occorre un motivo sfalsato, una variazione casuale, rotazioni individuali o la misurazione del testo, applichi tali trasformazioni dopo aver ricevuto la griglia regolare oppure usi un compositore specializzato.
Casi d'uso
Protegga le immagini di anteprima
Ripeta un logo sulle anteprime di prodotti, bozze o portfolio affinché un singolo ritaglio non elimini ogni marchio.
Generi istruzioni di rendering
Crei centri stabili per Canvas, SVG, PDF o pipeline di immagini lato server senza duplicare i calcoli del layout.
Mantenga coerenti le esportazioni
Riutilizzi le stesse regole di angolo e spaziatura su diverse dimensioni della tela mantenendo un motivo centrato e deterministico.
Domande frequenti
Le coordinate x e y indicano angoli o centri?
Indicano i centri delle tessere. Ruoti e disegni ogni filigrana attorno a quel punto usando l’angolo restituito.
Perché alcuni centri sono fuori dalla tela?
Una tessera ruotata può intersecare la tela anche con il centro esterno. Queste posizioni coprono bordi e angoli e vanno ritagliate durante il rendering.
In quale direzione si applica l’angolo?
Gli angoli positivi ruotano in senso orario nel consueto sistema immagine, dove x cresce verso destra e y verso il basso.
La spaziatura può essere zero?
Sì. Zero fa incontrare i bordi adiacenti lungo quell’asse della griglia. La spaziatura non può essere negativa.
La tessera della filigrana può essere più grande dell'immagine?
No. La tessera deve stare dentro la tela in entrambe le direzioni. Questa regola intercetta larghezza e altezza scambiate, una conversione di unità sbagliata o una richiesta che darebbe un unico timbro enorme invece di un motivo ripetuto.
Strumenti correlati
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo 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)Esempio di richiesta
{
"canvas_width": 800,
"canvas_height": 600,
"tile_width": 160,
"tile_height": 80,
"spacing_x": 40,
"spacing_y": 30,
"angle_deg": -30
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.watermark_tile_repeat_layout",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Limiti
max_mb | 15 |
max_megapixels | 12 |
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |
Note tecniche
Comprenda la rotazione e la copertura dei bordi
Le coordinate descrivono i centri, perché librerie raster, trasformazioni SVG e CSS e API Canvas supportano in modo coerente la rotazione centrata.
Esegua il rendering e riproduca il layout
Per ogni record, collochi il centro della filigrana in center_x e center_y, la ruoti di angle_deg attorno a quel centro e la disegni con larghezza e altezza fornite. L’algoritmo non usa spostamenti casuali, orologio, stato memorizzato o risorse di rete: input identici restituiscono sempre lo stesso JSON. Il prezzo dell’API è $0.002 per calcolo, indipendentemente dal numero di posizioni entro il limite di sicurezza.
Domande tecniche
Quanto costa la chiamata API?
Ogni calcolo costa $0.002. Il risultato contiene l’elenco completo delle posizioni entro il limite di sicurezza documentato.
Che cosa accade se la tessera supera la tela?
La richiesta restituisce un errore invalid_input perché una tessera ripetuta non può superare la larghezza o l’altezza della tela.