Question

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

Answer 1

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

我使用了带有约束功能的draggable插件。通常，此函数返回一个约束框或一个布尔值，它决定是否拖动某些东西。我总是返回虚假并自己移动圆圈：

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
}

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

沿路径svg创建一个可拖动的圆圈

1 个答案: