沿路径拖动一个圆sgg

Question

我使用SVG.JS插件在svg上的一个项目上工作。 我想让圆圈沿着路径拖动时

Answer 1

有趣的问题。我为你创建了一个小提琴，它显示了你想要的功能：https://jsfiddle.net/4ac7o8r6/18/

我用可拖动的插件和约束函数。通常这个函数返回一个约束框或一个布尔值，决定是否拖动某个东西。我总是返回假，并自己移动圆：

var canvas = SVG('container') 

var path = canvas.path('M200,300 Q400,50 600,300 T1000,300').stroke('black').x(10).fill('none') 
var length = path.length() 

var circle = canvas.circle(20).draggable(function(x, y) { 

    var p = getPointAtX(x) 

    circle.center(p.x, p.y) 

    return false 

}) 

然后我定义一个函数，它返回给定x的路径上的点。我必须通过近似来做到这一点，因为没有这样做的功能。我用嵌套间隔来做：

var start = path.node.getPointAtLength(0) 
circle.center(start.x, start.y) 

var precision = 1/length 

function getPointAtX(x) { 

    var p, pos = 0.5, interval = pos/2 

    while(p = path.node.getPointAtLength(pos*length)) { 

    if(p.x > x) { 
     pos -= interval 
    } else { 
     pos += interval 
    } 

    interval /= 2 

    // should be one pixel 
    if(interval < precision) break 
    } 

    return p 
} 

并且瞧，当拖动时，圆形在路径上移动。很好，不是吗？