如何使SVG圆沿着SVG路径拖动？

Question

我创建了一个JSFiddle，希望能够沿着路径拖动圆形，但我遇到了一些问题。这里是JSFiddle的链接：http://jsfiddle.net/fHBpC/2/ 以下是我遇到的问题：

1. 在dragMove中，参数“d”未定义。

2. 我的路径应该从（0,0）开始，到（200,200），最后到（150,150），但实际上它只从（0,0）开始到（200,200）。

3. 如何使圆只沿着线移动？

相应代码：

1.

function dragMove(d) {
    console.log("dragging a circle");
    d.x += d3.event.dx;
    d.y += d3.event.dy;
    d3.select(this)
        .attr('x', d.x)
        .attr('y', d.y)
        .attr("transform", "translate(" + d.x + "," + d.y + ")");
}

2.

var path = content.append("path").attr("d", "M 100 100 L 200 200 L 150 150").style("stroke-width", 5).style("stroke", "steelblue");

- egidra

Answer 1

1. 你可以使用this来引用圆形元素。但是dragMove()函数还有一些问题。

• 请注意，圆形没有属性x和y，它们被称为cx和cy。
• 这些属性不是数字，而是SVGAnimatedLength类型。这意味着你不能对它们进行算术运算。
• 你正在尝试以三种方式移动圆形：
  1. 通过更改属性
  2. 通过设置圆心的属性
  3. 通过transform
• 其中一种方法就足够了。此外，transform与cx/cy属性/属性无关，即它会将圆形移动额外的距离，使得圆形移动的距离是你预期的两倍。

当从200,200返回到150,150时，你的路径没有添加一个可区分于从0,0到200,200已经应用的颜色的额外“涂层”。

这真的很困难，取决于指针离开路径时的预期行为。最直观的行为可能是圆形始终移动到离指针最近的路径点。然而，这是一个非常复杂的计算，甚至可能没有明确的结果，除非它是一个简单的直线，那么很容易。你唯一的帮助是getPointAtLength()方法返回一个点。这意味着你可以使用指针向下或向右移动来将圆形进一步移动到路径的末端，并类似地使用向左或向上移动来将其进一步移动到起点（参见fixed jsFiddle）。这有一些缺点，即通常情况下，即使指针在路径上，圆形也会出现在其他位置（在你的示例中，这种情况不会发生，因为初始路径段是45°的描边），如果我已经到达屏幕边缘并且无法再移动，我怎么能到达路径的末端？或者，你可以尝试几个值传递给getPointAtLength()，并选择最接近指针位置的值。

- Thomas W