第二次拖动时,捕捉拖动位置恢复正常
Snap drag position gets back to normal when dragged second time
我正在尝试制作一个弯曲的滑块,您可以在其中单击并沿着路径拖动一个圆圈。这工作正常但是当我将圆圈拖到某个位置后拖动圆圈时,它会回到原来的位置
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>
示例图片
要回答这个具体问题,是因为您在拖动时使用 '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 });
}
但是,您很可能不想以这种方式结束,因为您注意到它并不总是匹配。
我认为这是因为 'x' 或 'dx' 横跨屏幕,不平移穿过曲线(由于使用曲线长度),它只适用于直线线。
这超出了这个问题的范围,但我已经回答了类似的问题,这可能对 SO question on dragging along line 有帮助,特别是如果你查看 gradsearch 函数(我没有想出那个,我认为它在原来的问题)。
我正在尝试制作一个弯曲的滑块,您可以在其中单击并沿着路径拖动一个圆圈。这工作正常但是当我将圆圈拖到某个位置后拖动圆圈时,它会回到原来的位置
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>
示例图片
要回答这个具体问题,是因为您在拖动时使用 '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 });
}
但是,您很可能不想以这种方式结束,因为您注意到它并不总是匹配。
我认为这是因为 'x' 或 'dx' 横跨屏幕,不平移穿过曲线(由于使用曲线长度),它只适用于直线线。
这超出了这个问题的范围,但我已经回答了类似的问题,这可能对 SO question on dragging along line 有帮助,特别是如果你查看 gradsearch 函数(我没有想出那个,我认为它在原来的问题)。