SVG 원을 SVG 경로를 따라 드래그하려면 어떻게해야합니까?

Question

경로를 따라 원을 드래그 할 수있는 JSFiddle을 만들었지 만 문제가 있습니다. http://jsfiddle.net/fHBpC/2/

가 여기에 내가 데 문제입니다 : dragMove, 인수 "D"의 내부

1. 정의되어 여기에 JSFiddle에 대한 링크입니다.

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입니다. 이것은 당신이 그들과 함께 할 수 없다는 것을 의미합니다.
   • 의 transform

하나의 수단에 의해 원의 중심의 속성을 설정하면 속성

을 변경하여

1. :
2. 은 세 가지 방식으로 원을 이동하려는 그 방법으로 충분할 것입니다. 또한 transform은 cx/cy 속성/속성과 무관합니다. 즉 원이 원하는 양만큼 멀리 이동하도록 원을 추가 이동합니다.
3. 마지막 비트를 200,200에서 150,150으로 되돌릴 때 경로는 0,0에서 200,200으로 갈 때 이미 적용된 페인트와 구별 할 수있는 추가 "코팅 채색"을 추가하지 않습니다.
4. 정말 어렵고 포인터가 경로를 벗어날 때 의도 한 동작에 따라 다릅니다. 가장 직관적 인 동작은 원이 포인터에 가장 가까운 경로상의 점으로 항상 이동한다는 것입니다. 그러나 이것은 단순한 직선이 아니라면 모호하지 않은 결과조차도 필요하지 않은 중요한 계산입니다. 유일한 도움은 포인트를 반환하는 getPointAtLength() 메서드입니다. 즉, 포인터의 아래 또는 오른쪽 이동을 사용하여 경로 끝까지 원을 더 이동시킬 수 있고 마찬가지로 왼쪽 또는 위로 움직여 시작점으로 더 이동시킬 수 있습니다 (fixed jsFiddle 참조).이것은 몇 가지 단점이 있습니다. 즉, 일반적으로 포인터가 경로에 있더라도 원이 다른 곳 (예 : 초기 경로 세그먼트가 45 ° 획이므로 사례에 해당하지 않음)에있을 수 있습니다. 화면 가장자리에 도달했는데 더 이상 움직일 수없는 경우 길 끝까지 도달합니까? 또는 getPointAtLength()에 몇 가지 값을 던져 포인터 위치에 가장 가까운 값을 선택할 수 있습니다.