3

我创建了一个 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");
4

1 回答 1

1
  1. 您可以使用this来引用圆形元素。但是该功能还有一些问题dragMove()
    • 请注意,圆没有属性xand y,它们被称为cxand cy
    • 这些属性不是数字,它们是 type SVGAnimatedLength。这意味着,您不能对它们进行算术运算。
    • 您正在尝试以三种方式移动圆圈:
      1. 通过更改属性
      2. 通过设置圆心的属性
      3. 通过一个transform
    • 其中一种方法就足够了。此外,transform它独立于cx/cy属性/属性,即它使圆圈移动了额外的量,以便圆圈移动的距离是您预期的两倍。
  2. 当从 200,200 回到最后一位到 150,150 时,您的路径不会添加额外的“油漆涂层”,这与从 0,0 到 200,200 时已经应用的油漆区分开来。
  3. 这真的很困难,并且取决于您在指针离开路径时的预期行为。最直观的行为可能是圆圈总是移动到路径上最接近指针的点。然而,这是一个重要的计算,甚至不需要一个明确的结果,除非它是一条简单的直线,这很容易。您唯一的帮助是getPointAtLength()返回点的方法。这意味着,您可以使用指针的向下或向右移动将圆进一步移动到路径的末尾,并类似地使用向左或向上移动将其进一步移动到起点(参见固定的 jsFiddle)。这有一些缺点,即一般来说,即使指针在路径上,圆圈也会在其他地方(在您的示例中不会出现这种情况,因为初始路径段是 45° 笔划),如何如果我已经到达屏幕的边缘并且无法进一步移动,我会到达路径的尽头吗?或者,您可以抛出一些值getPointAtLength()并选择最接近指针位置的值。
于 2012-12-10T07:20:59.053 回答