logo标签列表

Raphael.js缩放拖动会导致奇怪的跳跃行为

javascriptsvgresizeraphaelscale
6
我正在尝试使用Raphael.js的内置拖动方法来调整/缩放图像，但是我遇到了一些奇怪的行为。
这里是jsfiddle链接：http://jsfiddle.net/charleshimmer/5pdyy/1/ 使用右下角或底部右侧角来调整图像大小。您将看到在使用比例方法时它会出现跳跃和跳跃移动的奇怪行为。有人知道为什么吗？
我可以通过更新图像的宽度和高度来平滑调整大小，但那样会破坏长宽比。使用image.scale，可以保持长宽比，但是它会跳来跳去。
3
所以我的代码可以正常工作了。我只需要通过高度/宽度来计算图像的比例，而不是基于像素变化。我仍然需要根据用户从哪一侧调整图像大小来调整图像的大小，但我已经更新了 jsfiddle 链接，以反映可工作的代码，如果有人需要的话。 - chuckles
10
如果您已经解决了自己的问题，建议您回答自己的问题，而不是留下评论。这样可以让其他人受益并获得更多帮助。请记住不改变原意，使语言更通俗易懂。 - musefan
2
您的问题目前在“svg”和“raphael”标签的未回答列表顶部。请回答您自己的问题并接受它，谢谢。 - Joan Charmant
1个回答
0

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, ">");
};
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接