如何讓SVG圈沿着SVG路徑拖動？

我創建了一個JSFiddle，我希望能夠沿着路徑拖動一個圓，但是我遇到了問題。這裏是鏈接到的jsfiddle： http://jsfiddle.net/fHBpC/2/如何讓SVG圈沿着SVG路徑拖動？

下面是我遇到的問題：

內dragMove，參數「d」是不確定的。我的路徑應該從（0,0）開始到（200,200）並結束於（150,150），但是它只是從（0,0）開始並且到達（200，200）並且結束於（150,150） 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");

來源

2012-12-10 egidra

可以使用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()處輸入一些值，然後選取最接近指針位置的值。

來源

2012-12-10 07:20:59

如何讓SVG圈沿着SVG路徑拖動？

回答

相關問題