沿路徑拖動一個圓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 
} 

並且瞧，當拖動時，圓形在路徑上移動。很好，不是嗎？