javascript - 如何让 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");

Answer 1

1. 您可以使用this 来引用圆元素。但是 dragMove() 函数还有一些问题。
   • 请注意，圆没有属性 x 和 y，它们分别称为 cx 和 cy .
   • 这些属性不是数字，它们属于 SVGAnimatedLength 类型。这意味着，您不能对它们进行算术运算。
   • 您正在尝试以三种方式移动圆圈:
     1. 通过改变属性
     2. 通过设置圆心的属性
     3. 通过转换
   • 其中一种方法就足够了。此外，transform 独立于 cx/cy 特性/属性，即它将圆圈移动一个额外的量，以便圆圈移动两次尽你所能。
2. 当最后一位从 200,200 返回到 150,150 时，您的路径不会添加额外的“油漆层”，这与从 0,0 到 200,200 时已经应用的油漆不同。
3. 这真的很难，并且取决于您在指针离开路径时的预期行为。最直观的行为可能是圆总是移动到路径上最接近指针的点。然而，这是一个非常重要的计算，甚至不需要有明确的结果，除非它是一条简单的直线，在那里它很容易。您唯一的帮助是 getPointAtLength()返回一个点的方法。这意味着，您可以使用指针的向下或向右移动将圆圈进一步移动到路径的末端，并类似地使用向左或向上移动将其进一步移动到起点(参见 fixed jsFiddle )。这有一些缺点，即一般来说，即使指针在路径上，圆也会在其他地方(在你的例子中不会是这种情况，因为初始路径段是 45° 笔划)，以及如何如果我已经到达屏幕的边缘并且不能再移动，我就到达了路径的尽头？或者，您可以在 getPointAtLength() 中输入一些值，然后选择最接近指针位置的值。