2012-04-28 2 views
4

나는 백분율을 기준으로 배치 된 두 개의 원 사이에 경로를 그리려합니다. 그들이 이런 식으로 배치 된 이유는 용지 크기를 조정하고 위치를 유지하기 위해서입니다.Raphael JS에서 두 개의 백분율 지점 사이에 선 그리기

이 원 잘 작동하지만, 내가하려고 할 때이 같은 경로를 그릴 :

paper.path("M55% 70%L25% 20%") 

내가 할 모든은 다음과 같습니다

Error: Problem parsing d="M,0,0" 

가 어떻게 이것에 대해 있나를?

또한 수동으로 계산하지 않고 요소의 백분율 위치를 가져 오는 방법이 있습니까?

감사합니다.

업데이트 :

내 문제를 해결 결국,하지만 꽤 설명서, workaroundy 방법 :

var canvasX = $('#worldmap svg').width()/100; 
var canvasY = $('#worldmap svg').height()/100; 
mapCanvas.path("M" + Math.floor(parseFloat(from.attr("cx")) * canvasX) + " " 
     + Math.floor(parseFloat(from.attr("cy")) * canvasY) + "L" 
     + Math.floor(parseFloat(to.attr("cx")) * canvasX) + " " 
     + Math.floor(parseFloat(to.attr("cy")) * canvasY)); 

없이 말을,이 크지 않다.

+0

어떻게하면 원을 더 정확하게 그리는 것입니까? – mihai

+0

paper.circle ('50 % ','50 % ', 20); – Joel

답변

1

SVG PathData specification에는 이런 종류의 구문이 허용되지 않음을 알리는 표시가 없습니다. 실제로 저는 그것이 원의 중심과 같은 것이 허용된다는 것에 다소 놀랐습니다 ...하지만 당신이 맞을 것 같습니다.
그러나 척도를 수행하면이 jsfiddle에서 볼 수 있듯이 위치가 고정되지 않습니다. http://jsfiddle.net/PUg8r/

관련 문제