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. thiscircle 要素を参照するために使用できます。しかし、機能にはさらにいくつかの問題がありdragMove()ます。
    • 円には プロパティxandがなく、 andyと呼ばれることに注意してください。cxcy
    • これらのプロパティは数値ではなく、型SVGAnimatedLengthです。つまり、それらを使って算術を行うことはできません。
    • 次の 3 つの方法で円を動かそうとしています。
      1. プロパティを変更することで
      2. 円の中心の属性を設定することによって
      3. によってtransform
    • これらの方法の 1 つで十分です。また、/プロパティ / 属性transformとは無関係です。つまり、円が意図した距離の 2 倍移動するように、円をさらに移動します。cxcy
  2. 最後のビットを 200,200 から 150,150 に戻す場合、パスは、0,0 から 200,200 に移動するときに既に適用されているペイントと区別できる追加の「ペイント コート」を追加しません。
  3. これは非常に難しく、ポインターがパスを離れたときの意図した動作によって異なります。最も直感的な動作は、円が常にポインターに最も近いパス上のポイントに移動することです。ただし、これは非常に簡単な単純な直線でない限り、明確な結果を得る必要さえない重要な計算です。あなたが持っている唯一の助けgetPointAtLength()は、ポイントを返すメソッドです。つまり、ポインターの下または右への移動を使用して円をパスの最後に移動し、同様に左または上への移動を使用してさらに開始に移動することができます ( fixed jsFiddleを参照)）。これにはいくつかの欠点があります。つまり、一般に、ポインターがパス上にある場合でも、円は別の場所になります (あなたの例では、最初のパス セグメントが 45° のストロークであるため、そうではありません)。画面の端まで来て先に進めなくなったら、パスの端に到達したということですか? または、いくつかの値を投げgetPointAtLength()て、ポインターの位置に最も近い値を選択することもできます。
于 2012-12-10T07:20:59.053 に答える