Raphael.js drag with scale causes weird jumping be

2020-07-10 19:28发布

站内问答 / JavaScript
723 1 5

I'm trying to resize/scale an image using Raphael.js's built in drag method, but I'm getting some weird behavior.

Here is the jsfiddle: http://jsfiddle.net/charleshimmer/5pdyy/1/

Use the right or bottom right corner to resize the image. You will see some weird behavior with it jumping and skipping using the scale method. Anybody have any idea why?

I can get it to resize smoothing by updating the image's width and height, but then the aspect ratio is off. Using image.scale, the aspect ratio is maintained, but then it jumps all over the place.

1条回答
唯我独甜
2楼-- · 2020-07-10 20:11

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, ">");
};
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)