Resumé

Seadragon Ajax e Cropping

Cristian Merighi (lunedì 28 novembre 2011)

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();
};