Raphael.js与规模拖动导致奇怪的跳跃行为

我试图调整/缩放使用Raphael.js内置拖动方法的图像，但我收到了一些奇怪的行为。Raphael.js与规模拖动导致奇怪的跳跃行为

这里是的jsfiddle：http://jsfiddle.net/charleshimmer/5pdyy/1/

使用来调整图像的右侧或右下角。你会看到一些奇怪的行为，跳跃和跳过使用缩放方法。有人知道为什么吗？

我可以通过更新图像的宽度和高度来调整平滑大小，但宽高比关闭。使用image.scale，纵横比保持不变，但随后它跳到各处。

来源

2011-09-04 chuckles

所以我找到了工作。我只需要使用高度/宽度来计算图像的比例，而不是以像素为单位的变化。我仍然需要根据用户调整图像大小调整图像的大小，但是我已经更新了jsfiddle链接以反映任何需要它的工作代码。 – chuckles

+10

如果你已经设法解决你的问题，你应该回答你自己的问题，而不是留下评论。这样对其他人更有用 – musefan

你的问题目前在“svg”和“raphael”标签的未答复列表的顶部。请回答你自己的问题并接受它，谢谢。 –

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

来源

2013-01-02 06:41:26

Raphael.js与规模拖动导致奇怪的跳跃行为

回答

相关问题