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

Question

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

谁能给出最简单的源代码示例，演示如何使用鼠标拖动圆 rafael.js ？就像在 linked 示例中一样 ?

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 拖动圆圈 - 代码示例

Dragging a circle using rafael.js - code example

javascript

svg

rafaeljs