Question

我试图找到this rafael.js示例的源代码，但在页面上链接已损坏。

有人可以提供最简单的源代码示例，演示如何使用鼠标使用rafael.js拖动圆圈吗？就像链接的例子一样？

Answer 1

您可以在http://raphaeljs.com/reference.js引用来源本身，在L133您可以找到相关示例......

   (function (r) {
        var x, y;
        r.circle(15, 15, 10).attr(fill).drag(function (dx, dy) {
            this.attr({
                cx: Math.min(Math.max(x + dx, 15), 85),
                cy: Math.min(Math.max(y + dy, 15), 85)
            });
        }, function () {
            x = this.attr("cx");
            y = this.attr("cy");
        });

    })(prepare("Element.drag-extra"))

删除依赖关系并进行重构 - 以我的拙见 - 更清楚，你得到......

var paper = Raphael(10, 50, 320, 200);
var x, y;

paper.circle(15, 15, 10).attr("fill", "red").drag(
  function (dx, dy) {
    this.attr("cx", x + dx);
    this.attr("cy", y + dy);
  }, 
  function () {
    x = this.attr("cx");
    y = this.attr("cy");
  }
);

您可以在此处找到工作示例：http://jsfiddle.net/ke1Ltbft/1/

我个人更喜欢稍微重构一下代码......

paper.circle.drag(start, move, end)

function start(x, y) {
  // mouse/touch start code
}

function move(dx, dy) {
  // mouse/touch move code
}

function end(x, y) {
  // mouse/touch end code
}

使用rafael.js拖动一个圆圈 - 代码示例

1 个答案: