第二次拖动时捕捉拖动位置恢复正常

Question

我正在尝试制作一个弯曲的滑块，可以在其中单击并沿路径拖动一个圆圈。这工作正常，但是当我将圆圈拖到某个位置后拖动它时，它会回到原来的位置

var s=Snap('svg');
animateAlongPath = function (path, element) {
 var len = Snap.path.getTotalLength(path);
    var move = function(dx) {
        var movePoint=Snap.path.getPointAtLength(path, dx);
        this.attr({ cx: movePoint.x, cy: movePoint.y });
}


element.drag(move)
}  
var path=s.path('M10 200 q 120 -120 140 0 t 140 0').attr({
    fill:'none',
    stroke:'black'
});
var circle=s.circle(10,200,5);
animateAlongPath(path,circle)

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg width="500" height="500" ></svg>

示例图片

Answer 1

要回答这个特定问题，这是因为您在拖动时使用的是“dx”而不是“x”。所以'dx'（与拖动开始的差异）每次都会自然地重置。

所以对于move函数，你需要使用x参数，例如

var move = function( dx, dy, x, y ) {
    var movePoint=Snap.path.getPointAtLength(path, x);
    this.attr({ cx: movePoint.x, cy: movePoint.y });
}

jsfiddle

但是，您很可能不想这样结束，因为您注意到它并不总是匹配。

我认为这是因为屏幕上的“x”或“dx”不会跨曲线平移（由于使用曲线长度），它只能在直线上工作。

这超出了这个问题的范围，但我已经回答了类似的问题，这可能对SO question on dragging along line 有所帮助，尤其是如果你查看 gradsearch 函数（我没有想出那个，我认为它在原始问题中） .