當第二次拖動時，捕捉拖動位置恢復正常

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'（與拖動開始的區別）每次都會自動重置。

因此，而不是爲移動功能，你需要使用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 func（我沒有提出這個問題，我想這是在原始問題中）。