使圆可沿路径 svg 拖动

Question

我使用 SVG.JS 插件在 svg 上做一个项目。 我想让圆圈在拖动时跟随路径

Answer 1

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

我使用了带有约束函数的可拖动插件。通常，此函数返回一个约束框或布尔值，用于决定是否拖动某些内容。我总是返回 false 并自己移动圆圈：

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
}

瞧，拖动时圆圈在路径上移动。很不错不是吗？