Resumé

Seadragon Ajax e Cropping

Cristian Merighi () 0,00

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
  1. if (!window.Pacem)
  2.     window.Pacem = {};
  3. Pacem.Seadragon = function (containerID, dzi, resizeCallback) {
  4.     if (!window.Seadragon) return;
  5.     this.viewer = new Seadragon.Viewer(containerID);
  6.     this.viewer.setDashboardEnabled(false);
  7.     this.viewer.setMouseNavEnabled(false);
  8.     this.viewer.openDzi(dzi);
  9.     this.resize = function () {
  10.         var viewer = this.viewer;
  11.         if (!viewer || !viewer.viewport) return;
  12.         // container size in pixels
  13.         var vport = viewer.viewport.getContainerSize();
  14.         var vport_ratio = viewer.viewport.getAspectRatio();
  15.         // image size in pixels
  16.         var img = viewer.source.dimensions;
  17.         var img_ratio = 1.0 * img.x / img.y;
  18.         var x, y, w, h;
  19.         if (img_ratio > vport_ratio) {
  20.             // clip horizontally
  21.             w = vport_ratio / img_ratio;
  22.             h = 1.0 / img_ratio;
  23.         } else {
  24.             // clip vertically
  25.             w = 1.0;
  26.             h = (img_ratio / vport_ratio) / img_ratio;
  27.         }
  28.         x = .5 * (1 - w);
  29.         y = .5 * (1.0 / img_ratio - h);
  30.  
  31.         var rect = new Seadragon.Rect(x, y, w, h);
  32.         viewer.viewport.fitBounds(rect, true);
  33.         if (resizeCallback && typeof resizeCallback == 'function') {
  34.             resizeCallback(x, y, w, h);
  35.         }
  36.     }
  37.     var resizeHandler = Seadragon.Utils.createCallback(this, this.resize);
  38.     this.viewer.addEventListener('open', resizeHandler);
  39.     this.viewer.addEventListener('resize', resizeHandler);
  40.     this.resize();
  41. };

Spero possa essere utile.

Take care. Bye.

feedback
 

Syndicate

Autore

Cristian Merighi facebook twitter google+ youtube

Ultimi articoli

Top rated

Archivio

Dove sono?

Autore

Cristian Merighi facebook twitter google+ youtube

Le mie letture

Feeds