Question

我想要的是能够通过鼠标点击或拖动到所需位置来发出此动作信号

var drawingArea = Raphael(10,10,400,400);
var circle = drawingArea.circle(200,200,15);
circle.attr({fill:'blue', stroke:'red'});
var animation = Raphael.animation({cx:30, cy:30}, 5000);
circle.animate(animation);

Answer 1

您可以使用event handlers:

circle.click(function() {
    circle.animate(animation);
});

Answer 2

如果要在拖动鼠标后将其拖动到所需位置，则需要操纵其坐标（而不是使用动画）。 drag()功能允许您设置开始拖动，结束拖动和拖动时移动事件的回调。

这样做的一种方法是在开始时存储原始位置并在移动时更新它：

var start = function () {
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
};
var move = function (dx, dy) {
    this.attr({cx: this.ox + dx, cy: this.oy + dy});
};
circle.drag(move, start);

您可以看到an example code using this on the Raphael.js website。

如何使用Raphael Library使用鼠标单击或鼠标拖动在Javascript中执行动画？

2 个答案: