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

Question

我试图找到这个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
}