javascript - Raphael对 Angular 变换对象和无限setIntervals

我正在制作一个小型动画，用户在其中拖动一个圆，然后圆又返回到起点。我想出了一种使圆回到起点的方法。唯一的问题是，它将在返回之前撞到框架的一侧。它是否可以直接返回（遵循在形状和起点之间绘制的直线的路径）。

另一个问题是我的setInterval不想停止。如果尝试第二次拉动它，则在释放鼠标之前会拉回它。似乎每次都在加速。我已经尝试过使用带有计时器的while循环，但是结果却不尽如人意。这个可以解决吗？

    var paper = Raphael(0, 0, 320, 200);
    //var path = paper.path("M10 10L40 40").attr({stoke:'#000000'});
    //var pathArray = path.attr("path");
    var circle = paper.circle(50, 50, 20);
    var newX;
    var newY;
    circle.attr("fill", "#f00");
    circle.attr("stroke", "#fff");



     var start = function () {
        this.attr({cx: 50, cy: 50});
        this.cx = this.attr("cx"),
        this.cy = this.attr("cy");
     },
     move = function (dx, dy) {
        var X = this.cx + dx,
        Y = this.cy + dy;
        this.attr({cx: X, cy: Y});
     },

     up = function () {
        setInterval(function () {
    if(circle.attr('cx') > 50){
        circle.attr({cx : (circle.attr('cx') - 1)});
    } else if (circle.attr('cx') < 50){
        circle.attr({cx : (circle.attr('cx') + 1)});
    }

    if(circle.attr('cy') > 50){
        circle.attr({cy : (circle.attr('cy') - 1)});
    } else if (circle.attr('cy') < 50){
        circle.attr({cy : (circle.attr('cy') + 1)});
    }
   path.attr({path: pathArray});
},2);
 };

circle.drag（移动，开始，向上）;

这是Jfiddle：http://jsfiddle.net/Uznp2/

非常感谢：D

最佳答案

我将“向上”功能修改为以下功能

up = function () {
  //starting x, y of circle to go back to
  var interval = 1000;
  var startingPointX = 50;
  var startingPointY = 50;
  var centerX = this.getBBox().x + (this.attr("r")/2);
  var centerY = this.getBBox().y + (this.attr("r")/2);
  var transX = (centerX - startingPointX) * -1;
  var transY = (centerY - startingPointY) * -1;
  this.animate({transform: "...T"+transX+", "+transY}, interval);
};

并且“开始”功能如下：

var start = function () {
  this.cx = this.attr("cx"),
  this.cy = this.attr("cy");
}

这是您要寻找的行为吗？对不起，如果我误解了这个问题。

关于javascript - Raphael对 Angular 变换对象和无限setIntervals，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16555763/