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與規模拖動導致奇怪的跳躍行爲

回答

相關問題