라파엘 JS, 경로가 두 개의 원의 중심점을 연결 나는 두 개의 원과 하나 개의 경로를 정의

Question

경로 문제, 함께 애니메이션 :

c1=r.circle(40, 40, 20).attr(dashed); 
c2=r.circle(140, 40, 20).attr(dashed); 
path = r.path("m 40 40 l 100 0"); 

내가 기능을 가지고 싶습니다 경우에 마우스 클릭 왼쪽 원 c1은 오른쪽 원 c2 (왼쪽 원 c1이 오른쪽 원 c2으로 이동하여 마지막으로 합류 함)과 함께 축소되며이 과정에서 경로는 항상 두 원의 중심점을 연결합니다., 경로가 짧아지고 두 개의 원이 가까이 갈수록 짧아집니다.

나는이 기능을 구현하는 방법을 확실하지 않다, 나는

path.onclicke(){ 
c1.animateAlong(path, 1000, true, function(){ 
    c1.attr({cx: 140, cy: 40}); 
}); 
} 

같은 몇 가지 일을 시도하지만 경로에 가까이 C1으로 짧아지고되도록 경로를 처리하는 방법을 모른다 c2. 누구든지 도울 수 있니?

Answer 1

나는 지난 2 주 동안 경로와 씨름 해왔다. 나는 당신에게 확신한다. path 객체에 대한 .attr() 및 .animate()에 완전히 새로운 경로 문자열을 지정할 수 있습니다 (http://raphaeljs.com/reference.html#Element.attr의 설명서 참조). 그래서, 나는 끔찍한 일 - 저런 형광 색상에 예를 조롱하고 난 당신이 이런 찾고 생각하는 결과를 얻었다 :

var c1 = this.canvas.circle(300, 200, 50).attr({ stroke: "#F00", fill: "#F00", 'fill-opacity': 0.5, 'stroke-width': 10 }); 
var c2 = this.canvas.circle(500, 200, 50).attr({ stroke: "#00F", fill: "#00F", 'fill-opacity': 0.5, 'stroke-width': 10 }); 
var p = this.canvas.path("M300 200 L500 200").attr({ stroke: "#0F0", "stroke-width": 10 }); 
p.click( function() 
{ 
    c1.animate({ cx: 400, cy: 200, r: 60 }, 1500); 
    c2.animate({ cx: 400, cy: 200, r: 60 }, 1500); 
    p.animate({ path: "M400 200 L400 200", "stroke-opacity": 0.25 }, 1500); 
}); 

이 당신이 생각했던 무엇인가?