使圆圈可沿路径拖动 svg

Question

我使用 SVG.JS 插件处理 svg 项目。我想让圆跟随路径，拖动时

Answer 1

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

我用的是带约束功能的draggable插件。通常这个函数 return 是一个约束框或一个布尔值，它决定是否拖动某些东西。我总是return 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

})

然后我定义了一个函数，它 return 是给定 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
}

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

使圆圈可沿路径拖动 svg

Make a circle draggable along a path svg

javascript

svg.js