Raphael.js arrastra con escala provoca un comportamiento de salto extraño

Estoy tratando de cambiar el tamaño/escala de una imagen usando el método de arrastre incorporado de Raphael.js, pero estoy obteniendo un comportamiento extraño.Raphael.js arrastra con escala provoca un comportamiento de salto extraño

Aquí es el jsFiddle: http://jsfiddle.net/charleshimmer/5pdyy/1/

utilizar el derecho o la esquina inferior derecha para cambiar el tamaño de la imagen. Verás un comportamiento extraño saltando y saltando usando el método de escala. Alguien tiene alguna idea de por qué?

Puedo cambiar el tamaño del suavizado al actualizar el ancho y alto de la imagen, pero luego la relación de aspecto está desactivada. Usando image.scale, la relación de aspecto se mantiene, pero luego salta por todos lados.

Fuente

2011-09-04 chuckles

Así que tengo que trabajar. Solo necesito calcular la relación de la imagen usando alto/ancho y no fuera del cambio en píxeles. Todavía tengo que ajustar el tamaño de la imagen según el lado de la imagen desde la que el usuario cambia el tamaño de la imagen, pero he actualizado el enlace jsfiddle para que refleje el código de trabajo en caso de que alguien lo necesite. – chuckles

+10

Debe responder su propia pregunta en lugar de dejar un comentario si ha logrado resolver su problema. De esta manera será más útil para los demás – musefan

Su pregunta se encuentra actualmente en la parte superior de la lista sin respuesta de las etiquetas "svg" y "raphael". Por favor responde tu propia pregunta y acéptala, gracias. –

HTML

<html> 
<head> 
    <title>Photo Test</title> 
</head> 
<body> 
    <div id="editor"></div> 
    <img id="image" 
     src="http://www.pyrblu.com/assets/launchpad_resources/demo.jpg" 
     style="display:none" 
    > 
</body> 
</html>

CSS

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

JavaScript

var Editor = {}, 
ctFactor = 7; 

// create Raphael canvas 
Editor.paper = Raphael('editor', 582, 514.8); 

// wait for image to load 
$("#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) { 
     // only do this if the user isn't currently moving/resizing image 
     if(! this.ready){ 
      return; 
     } 
     var side = Editor.sideDection(e, this); 
     // if the user's mouse is along the edge we want resize 
     if(side){ 
      Editor.image.state = 'resizable'; 
     } 
     // else it's towards the middle and we want to move 
     else{ 
      Editor.image.state = 'movable'; 
     } 
     var cursor = (side) ? side + '-resize' : 'move'; 
     this.attr('cursor', cursor); 
    }); 

}); 

Editor.sideDection = function(event, ct){ 
    // check north side 
    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 = ''; 

    // loop through all 4 sides and concate the ones that are true 
    for(var key in directions) { 
     if(directions.hasOwnProperty(key)){ 
      if(directions[key]){ 
       side = side + key; 
      }  
     } 
    } 

    return side; 
}; 

Editor.dragStart = function() { 
    console.log('at start'); 
    // grab original x, y coords   
    this.ox = this.attr("x"); 
    this.oy = this.attr("y"); 

    // toggle user is doing something 
    // so other actions are blocked 
    this.ready = false; 

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

Editor.dragging = function (dx, dy, x, y, e) { 
    console.log('at dragging'); 
    if(this.state === 'movable'){ 
     // this does the actual moving of the object 
     this.attr({x: this.ox + dx, y: this.oy + dy});  
    } 
    // we are resizing then 
    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);   
     //resize image, update both height and width to keep aspect ratio 
     // 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, ">"); 
};

Fuente

2013-01-02 06:41:26

Raphael.js arrastra con escala provoca un comportamiento de salto extraño

Respuesta

Cuestiones relacionadas