Raphael.js trascina con la scala causa strano comportamento di salto

Sto provando a ridimensionare/ridimensionare un'immagine usando il metodo di trascinamento incorporato di Raphael.js, ma sto ottenendo un comportamento strano.Raphael.js trascina con la scala causa strano comportamento di salto

Ecco la jsfiddle: http://jsfiddle.net/charleshimmer/5pdyy/1/

utilizzare il diritto o l'angolo in basso a destra per ridimensionare l'immagine. Vedrai qualche strano comportamento saltando e saltando usando il metodo della scala. Qualcuno ha qualche idea del perché?

Posso farlo per ridimensionare la levigatura aggiornando la larghezza e l'altezza dell'immagine, ma poi le proporzioni sono spente. Usando image.scale, il rapporto aspetto viene mantenuto, ma poi salta dappertutto.

fonte

2011-09-04 chuckles

così ho ottenuto lavorando. Ho solo bisogno di calcolare il rapporto dell'immagine usando altezza/larghezza e non al di fuori della variazione in pixel. Ho ancora bisogno di aggiustare il modo in cui l'immagine dovrebbe ridimensionarsi a seconda del lato dell'immagine da cui l'utente sta ridimensionando l'immagine, ma ho aggiornato il link jsfiddle per riflettere il codice funzionante nel caso qualcuno ne avesse bisogno. – chuckles

+10

Dovresti rispondere alla tua domanda piuttosto che lasciare un commento se sei riuscito a risolvere il tuo problema. In questo modo sarà più utile per gli altri – musefan

La tua domanda è attualmente in cima alla lista senza risposta per i tag "svg" e "raphael". Per favore rispondi alla tua domanda e accettala, grazie. –

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, ">"); 
};

fonte

2013-01-02 06:41:26

Raphael.js trascina con la scala causa strano comportamento di salto

risposta

Problemi correlati