rotate drag&drop and resize immagini

[guidino]

Ciao a tutti,
in un contenitore devo caricare delle immagini e abilitare rotate, scale e drag.
in più devo accedere alle nuove coordinate, alla variazione di scale e all'angolo di rotazione.

Inutile dire che sono giorni che faccio ricerche in rete e guardo codice ma non riesco ad uscirne fuori, ho bisogno del vostro aiuto.

in rete (su html.it) a questo link http://www.html.it/demo/javascript/2...emo_index.html
ho trovato il codice che fa ruotare le immagini ma sinceramente non capisco in che unità di misura sia l'angolo di rotazione


ecco lo script

(function( $ ) {
    $.fn.ruota = function() {
        var img = this.find("img");
        var imgpos = img.position();
        var x0, y0;
        
        
        $(window).load(function() {
            img.removeAttr("width"); 
            img.removeAttr("height");

            x0 = imgpos.left + (img.width() / 2);
            y0 = imgpos.top + (img.height() / 2);
        });
        
        
        var x, y, x1, y1, drag = 0;
        
        img.css({
            "cursor": "pointer",
            "position": "relative"
        });
        
        
        img.mousemove(function(e) {
            x1 = e.pageX;
            y1 = e.pageY;
            x = x1 - x0;
            y = y1 - y0;

            r = 360 - ((180/Math.PI) * Math.atan2(y,x));
            
            
            $('#info').html("x0: " + x0 + ", y0: " + y0 + "
x1: " + x1 + ", y1: " + y1 + "
x: " + x + ", y: " + y + "
angolo: " +rDiff/360);

            if (drag == 1) {
                img.css("transform","rotate(-"+r+"deg)");
                img.css("-moz-transform","rotate(-"+r+"deg)");
                img.css("-webkit-transform","rotate(-"+r+"deg)");
                img.css("-o-transform","rotate(-"+r+"deg)");
                
            } 
        });
        
        img.mousedown(function() {
            if (drag == 0) {
                drag = 1;
                img.css("-webkit-box-shadow", "0 0 5px #999");
                img.css("-moz-box-shadow", "0 0 5px #999");
                img.css("box-shadow", "0 0 5px #999");
            } else {
                drag = 0;
                img.css("-webkit-box-shadow", "0 0 2px #999");
                img.css("-moz-box-shadow", "0 0 2px #999");
                img.css("box-shadow", "0 0 2px #999");
            }
        });
        
        img.mouseleave(function() {
            drag = 0;
        });
    };
})( jQuery );

Qualcuno esperto potrebbe aiutarmi?
c'è in rete qualche link dove viene implementato il drag lo scale e il rotate insieme?

Infine, per applicare le trasformazioni a tutte le immagini caricate come faccio?


Conto sul vostro aiuto

Grazie

[guidino]

un aiutino ?