Crei un layout per confrontare immagini prima e dopo

Indichi le dimensioni in pixel di entrambe le immagini, scelga una presentazione affiancata o una sovrapposizione con cursore e riceva canvas, rettangoli, aree di ritaglio e posizione del divisore verticale come dati strutturati. Sono previste dimensioni uguali, perché un confronto visivo attendibile richiede contenuti allineati. Se le immagini sorgente differiscono, Lei può richiedere esplicitamente un’istruzione che ridimensioni l’immagine successiva in base a quella precedente.

Scelga il formato di confronto adatto al racconto

Una presentazione prima-dopo può soddisfare due diverse esigenze di visualizzazione. Un layout di confronto con immagini affiancate mantiene ogni immagine interamente visibile, soluzione utile quando il pubblico deve esaminare tutta la scena, confrontare aree lontane o consultare il risultato senza interagire. Il canvas restituito ha una larghezza doppia rispetto a quella effettiva dell’immagine: il pannello precedente è a sinistra, quello successivo a destra e un divisore verticale occupa il confine comune. La sovrapposizione con cursore dispone invece entrambe le immagini nello stesso sistema di coordinate. I rettangoli di ritaglio complementari mostrano l’immagine precedente a sinistra del divisore e quella successiva a destra. Le piccole modifiche risultano così più facili da individuare, perché gli elementi corrispondenti restano nello stesso punto durante lo spostamento del divisore. Scelga la modalità in base al pubblico e all’interfaccia, quindi utilizzi direttamente i rettangoli in CSS, SVG, Canvas o in un livello di rendering nativo. Le coordinate sono pixel interi, senza convenzioni nascoste da ricostruire in seguito.

Gestisca esplicitamente le differenze di dimensione

I confronti attendibili iniziano con dimensioni uguali. Se un’immagine misura 1200 per 800 pixel e l’altra 1000 per 800, sovrapporle senza dichiarare una trasformazione sposta i dettagli corrispondenti e può amplificare o nascondere una modifica. Per questo la calcolatrice rifiuta larghezze o altezze diverse, salvo quando `resize_to_match` è attivo. Con tale opzione, l’immagine precedente diventa la destinazione canonica e il risultato include le dimensioni di destinazione dell’immagine successiva insieme a fattori indipendenti di scala orizzontale e verticale. Questa regola indica con precisione al renderer quale adattamento è previsto e consente di rilevare una deformazione non uniforme. Lo strumento non esegue il ridimensionamento né sceglie il ritaglio. Se è importante conservare le proporzioni, prepari sorgenti corrispondenti o applichi un ritaglio in una pipeline per immagini prima di richiedere il layout. Quando le dimensioni coincidono già, l’oggetto di ridimensionamento segnala soltanto che non serve alcun intervento. La struttura rimane così prevedibile e priva di campi facoltativi nulli.

Trasformi l’output del divisore in un’interfaccia operativa

Per la sovrapposizione, indichi una percentuale del divisore compresa fra zero e cento. La calcolatrice la converte nel pixel più vicino sul canvas e restituisce due ritagli le cui larghezze sommano sempre la larghezza totale. A zero per cento il ritaglio precedente ha larghezza nulla e l’immagine successiva è completamente visibile; a cento per cento avviene il contrario. Viene restituita anche la percentuale invariata, utile per lo stato dell’interfaccia, i valori di accessibilità, le analisi o un ricalcolo dopo un ridimensionamento responsivo. Nella modalità affiancata, due pannelli a larghezza piena collocano naturalmente il divisore al centro del canvas combinato, indipendentemente dalla percentuale inserita. Utilizzi l’orientamento e la coordinata x per posizionare una linea, una maniglia o un controllo azionabile da tastiera. Un cursore pronto per la produzione deve comunicare il valore alle tecnologie assistive, accettare i tasti freccia e identificare entrambi i lati. Poiché questa capacità restituisce geometria anziché markup, lo stesso risultato deterministico può alimentare un componente web, una grafica social, un’anteprima del design system o un’applicazione mobile.