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

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
}