Raphael.js 드래그 스케일이 이상한 점핑 동작을 일으킴

Question

Raphael.js의 드래그 방법을 사용하여 이미지의 크기를 조정하려고했으나 일부 ​​이상한 동작이 나타납니다. http://jsfiddle.net/charleshimmer/5pdyy/1/

이미지의 크기를 조절 할 수있는 권리 또는 오른쪽 아래 모서리를 사용하여 여기에

는 jsfiddle입니다. 스케일 방법을 사용하여 건너 뛰거나 건너 뛰는 이상한 동작을 보게됩니다. 왜 아무 생각 없어?

이미지의 너비와 높이를 업데이트하여 이미지의 크기를 조정할 수 있지만 가로 세로 비율은 꺼져 있습니다. image.scale을 사용하면 종횡비가 유지되지만 모든 곳으로 점프됩니다.

Answer 1

HTML

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

자바 스크립트

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