Question

我正在尝试使用Raphael.js内置的拖动方法调整图像大小/缩放图像，但我得到了一些奇怪的行为。

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

使用右下角或右下角调整图像大小。你会看到一些奇怪的行为，它使用scale方法跳跃和跳过。任何人都知道为什么？

我可以通过更新图像的宽度和高度来调整平滑度，但然后关闭宽高比。使用image.scale，保持纵横比，但随后它会跳到整个地方。

Answer 1

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

Raphael.js拖动比例导致奇怪的跳跃行为

1 个答案: