Seadragon Ajax e Cropping
Cristian Merighi ()

Come scalare e ritagliare con successo una composizione Seadragon utilizzando le API Ajax.
Questo articolo è da considerarsi obsoleto. Alcune funzionalità potrebbero non essere più disponibili e non è possibile aggiungere commenti.
Sto implementando un sistema di gestione del layout per applicazioni web che sfrutti a pieno lo spazio reso disponibile dal display dell'utente.
Un cosiddetto liquid layout.
Affrontando il problema "immagini" (e relativo resizing) ho pensato di appoggiarmi alle funzionalità rese disponibili tramite
Seadragon (ajax) e le sue API.
Seadragon permette (in un suo utilizzo base), grazie al sistema di tiles, di poter automaticamente scalare un'immagine
in relazione alle dimensioni dell'elemento del DOM che funge da "contenitore".
Unica insidia è risultata essere il particolare sistema di coordinate normalizzate utilizzato da Seadragon assieme alla tipologìa di
resizing predefinita.
L'immagine viene proposta dimodoché possa essere vista "per intero" all'interno dell'area disponibile. Il mio obiettivo
puntava invece ad averla in formato cropped
per evitare aree "vuote" all'interno del viewport.
Più facile a dirsi che a farsi, finché non ci si decide a comprendere come funziona - appunto - il
sistema di coordinate di Seadragon:
in estrema sintesi, il valore dell larghezza viene normalizzato ad 1,
mentre il valore di normalizzazione dell'altezza risulta essere l'inverso del rapporto tra le dimensioni originali dell'immagine sorgente
(il link riportato nel link precedente porta un esempio utile alla comprensione).
Ok quindi, sapendo ora come funziona il tutto, sono in grado di buttar giù una struttura javascript che
risponda alle mie esigenze (demo):
Seadragon resizing "UniformToFill" style
- if (!window.Pacem)
- window.Pacem = {};
- Pacem.Seadragon = function (containerID, dzi, resizeCallback) {
- if (!window.Seadragon) return;
- this.viewer = new Seadragon.Viewer(containerID);
- this.viewer.setDashboardEnabled(false);
- this.viewer.setMouseNavEnabled(false);
- this.viewer.openDzi(dzi);
- this.resize = function () {
- var viewer = this.viewer;
- if (!viewer || !viewer.viewport) return;
- // container size in pixels
- var vport = viewer.viewport.getContainerSize();
- var vport_ratio = viewer.viewport.getAspectRatio();
- // image size in pixels
- var img = viewer.source.dimensions;
- var img_ratio = 1.0 * img.x / img.y;
- var x, y, w, h;
- if (img_ratio > vport_ratio) {
- // clip horizontally
- w = vport_ratio / img_ratio;
- h = 1.0 / img_ratio;
- } else {
- // clip vertically
- w = 1.0;
- h = (img_ratio / vport_ratio) / img_ratio;
- }
- x = .5 * (1 - w);
- y = .5 * (1.0 / img_ratio - h);
-
- var rect = new Seadragon.Rect(x, y, w, h);
- viewer.viewport.fitBounds(rect, true);
- if (resizeCallback && typeof resizeCallback == 'function') {
- resizeCallback(x, y, w, h);
- }
- }
- var resizeHandler = Seadragon.Utils.createCallback(this, this.resize);
- this.viewer.addEventListener('open', resizeHandler);
- this.viewer.addEventListener('resize', resizeHandler);
- this.resize();
- };
Spero possa essere utile.
Take care. Bye.