Question

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

以下是我遇到的问题：

在dragMove中，参数“d”未定义。
我的路径应该从（0,0）开始到（200,200）并以（150,150）结束，但它只从（0,0）开始并转到（200），200）。
如何让圆圈仅沿着直线拖动？

对应代码：

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

您可以使用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()处抛出一些值，然后选择最接近指针位置的值。

如何让SVG圈沿SVG路径拖动？

1 个答案: