如何让 SVG 圆圈沿着 SVG 路径拖动？答案

【问题标题】：How to get SVG circle to drag along SVG path?如何让 SVG 圆圈沿着 SVG 路径拖动？
【发布时间】：2012-12-10 04:33:24
【问题描述】：

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

以下是我遇到的问题：

在 dragMove 内部，参数“d”未定义。
我的路径应该从 (0,0) 开始到 (200, 200) 并在 (150, 150) 结束，但它只从 (0, 0) 开始并到 (200) , 200)。
如何让圆圈只沿线拖动？

对应代码：

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 + ")");
}

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

【问题讨论】：

标签： javascript svg d3.js

【解决方案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() 处输入一些值，然后选择最接近指针位置的值。

【讨论】：