Raphael.js Draggen mit Skalierung verursacht seltsames Springverhalten

Question

Ich versuche, ein Bild mithilfe der integrierten Drag-Methode von Raphael.js zu verkleinern/skalieren, aber ich erhalte ein seltsames Verhalten.

Hier ist der jsfiddle: http://jsfiddle.net/charleshimmer/5pdyy/1/

Verwenden Sie die rechte oder untere rechte Ecke, um das Bild zu verkleinern. Sie werden ein seltsames Verhalten mit Springen und Überspringen sehen, wenn Sie die Skalierungsmethode verwenden. Hat jemand eine Idee warum?

Ich kann erreichen, dass es weich skaliert, indem ich die Breite und Höhe des Bildes aktualisiere, aber dann stimmt das Seitenverhältnis nicht mehr. Bei Verwendung von image.scale wird das Seitenverhältnis beibehalten, aber dann springt es überall hin.

Answer 1

HTML

    Foto Test

CSS

svg 
  {
  border: 1px solid red;
  background:#fff;
  border-radius: 45px;
  }

JavaScript

var Editor = {},
ctFactor = 7;

// erstelle Raphael Leinwand
Editor.paper = Raphael('editor', 582, 514.8);

// warte auf das Laden des Bildes
$("#image").load(function(){

    Editor.image = Editor.paper.image("http://www.pyrblu.com/assets/launchpad_resources/demo.jpg", 25, 25, 282, 465.2);

    Editor.image.drag(Editor.dragging, Editor.dragStart, Editor.dragEnd);
    Editor.image.ready = true;
    Editor.image.mousemove(function (e) {
        // dies nur ausführen, wenn der Benutzer das Bild nicht gerade bewegt / ändert
        if( ! this.ready){
            return;
        }
        var side = Editor.sideDection(e, this);
        // wenn die Maus des Benutzers am Rand ist, möchten wir das Bild vergrößern
        if(side){
            Editor.image.state = 'veränderbar';
        }
        // anderweitig ist es in der Mitte und wir möchten das Bild verschieben
        else{
            Editor.image.state = 'verschiebbar';
        }
        var cursor = (side) ? side + '-resize' : 'move';
        this.attr('cursor', cursor);
    });

});

Editor.sideDection = function(event, ct){
    // überprüfe nördliche Seite
    var directions = {
        n: Math.abs(event.offsetY - ct.attr('y')) <= ctFactor,
        s: Math.abs(event.offsetY - (ct.attr('height') + ct.attr('y'))) <= ctFactor,
        e: Math.abs(event.offsetX - (ct.attr('width') + ct.attr('x'))) <= ctFactor,
        w: Math.abs(event.offsetX - ct.attr('x')) <= ctFactor
    },
    side = '';

    // durchlaufe alle 4 Seiten und verbinde die wahren
    for(var key in directions) {
        if(directions.hasOwnProperty(key)){
            if(directions[key]){
                side = side + key;
            }    
        }
    }

    return side;
};

Editor.dragStart = function () {
    console.log('am Anfang');
    // ursprüngliche x, y Koordinaten abrufen      
    this.ox = this.attr("x");
    this.oy = this.attr("y");

    // Benutzer macht etwas, deshalb blockieren wir andere Aktionen
    this.ready = false;

    this.animate({opacity: .65}, 500, ">");
};

Editor.dragging = function (dx, dy, x, y, e) {
    console.log('am Bewegen');
    if(this.state === 'verschiebbar'){
        // dies bewegt das Objekt tatsächlich
        this.attr({x: this.ox + dx, y: this.oy + dy});    
    }
    // dann verändern wir
    else{

        var diff = (x - this.ox) - this.attr('width'),
            xratio = 1 + diff / this.attr('width'),
            yratio = 1 + diff / this.attr('height');

        console.log('diff: ', diff, 'xratio: ', xratio, 'yratio: ', yratio);           
        // Bild vergrößern, Höhe und Breite aktualisieren, um das Seitenverhältnis beizubehalten
        // this.attr({
        //     'width': this.attr('width') * xratio,
        //     'height': this.attr('height') * yratio
        // });
        this.scale(xratio, xratio, 0, 0);

        //console.log('h: ', this.attr('height'), 'w: ', this.attr('width'), 'r', this.attr('width') / this.attr('height'));
    }
};

Editor.dragEnd = function () {
    this.ready = true;
    this.animate({opacity: 1}, 500, ">");
};