Crei un collage e calcoli posizione e dimensioni

Individua la larghezza necessaria per ogni colonna e l’altezza di ogni riga, quindi restituisce le dimensioni della tela e il rettangolo esatto di ciascuna cella. Usi il risultato per posizionare con precisione le immagini in HTML, canvas, SVG, strumenti di progettazione o pipeline di elaborazione, senza sommare manualmente gli scostamenti e senza rischiare sovrapposizioni.

Prepari le dimensioni in ordine di riga

Fornisca una coppia di larghezza e altezza per ogni immagine, procedendo da sinistra a destra nella prima riga e poi nello stesso modo nelle righe successive. I campi rows e cols definiscono la forma della griglia, quindi il loro prodotto deve corrispondere esattamente al numero di immagini. Questo controllo rigoroso evita un problema comune nei collage: lasciare una cella vuota o scartare un’immagine in eccesso perché la forma prevista non coincide con l’elenco di origine. Larghezza e altezza devono essere numeri finiti positivi. Possono essere interi o decimali, così Lei può utilizzare pixel, punti, millimetri o qualsiasi altra unità coerente. Non mescoli unità diverse nella stessa richiesta, perché l’algoritmo considera tutti i valori parte di un unico sistema di coordinate. La risposta conserva le dimensioni originali accanto alla cella calcolata, consentendo di collegare ogni risultato all’immagine corrispondente e di decidere in seguito come adattarla, ritagliarla o allinearla.

Comprenda come vengono calcolate le celle

Ogni colonna assume la maggiore larghezza originale presente al suo interno e ogni riga assume la maggiore altezza tra le proprie immagini. La cella alla loro intersezione usa quindi la larghezza della colonna e l’altezza della riga: i confini restano allineati e ogni immagine può entrare nella cella con le dimensioni originali. Il calcolatore costruisce gli scostamenti x sommando le larghezze delle colonne precedenti e gli scostamenti y sommando le altezze delle righe precedenti. La prima cella inizia da zero, zero. La larghezza complessiva del collage è la somma delle colonne, mentre l’altezza è la somma delle righe. Questo metodo produce una griglia rettangolare compatta senza inventare una tela di destinazione o una regola di ridimensionamento. Calcola esclusivamente la geometria: non allunga, ritaglia, ruota né centra le immagini. Lei potrà applicare in seguito tali scelte visive usando il rettangolo restituito e le dimensioni originali conservate.

Utilizzi il risultato nella pipeline di rendering

Legga l’array cells nello stesso ordine delle immagini in ingresso. Ogni elemento include l’indice, la riga e la colonna a base zero, l’origine x e y, la larghezza e l’altezza della cella e le dimensioni originali dell’immagine. Un renderer canvas può disegnare in ogni rettangolo; un generatore CSS può convertire column_widths e row_heights in tracce esplicite; un generatore SVG può creare rettangoli di ritaglio prima di inserire le immagini. Poiché l’output è deterministico e indipendente dall’ambiente, la stessa richiesta produce una geometria identica nel browser, durante una build o tramite API. Per centrare senza scalare, sottragga le dimensioni originali da quelle della cella e divida ogni differenza per due. Per ottenere un comportamento cover o contain, calcoli la scala dai rapporti d’aspetto. Separare queste politiche mantiene il layout prevedibile, verificabile e adatto a stili visivi diversi.