SVG 이미지의 반전 좌표

svg를 사용하여 좌표 세트에서 이미지를 만들고 있습니다. 내 자바 스크립트 안에 JSON 객체를로드 한 다음 필요에 따라 필요한 요소 (svg 프레임, 폴리곤, 선 등)를 만듭니다.SVG 이미지의 반전 좌표

//x1,x2,y1,y2 are all passed here as method arguments 
var vLine = document.createElementNS(svgNS, "svg:line") 
vLine.setAttributeNS(null, "x1", new String(x1 ) + "px"); 
vLine.setAttributeNS(null, "y1", new String(y1 ) + "px"); 
vLine.setAttributeNS(null, "x2", new String(x2 ) + "px"); 
vLine.setAttributeNS(null, "y2", new String(y2 ) + "px"); 
vLine.setAttributeNS(null, "style", "stroke-width:1;stroke:black");

이미지 미세을 보이고 있지만, 문제가 y 축을 따라 도시 반전된다는 점이다. 저는 약간의 독서를하고 초기 좌표 시스템이 오른쪽 아래가 아닌 페이지의 왼쪽 상단에서부터 시작한다는 것을 알게되었습니다. 그리고 스케일을 역으로하면 괜찮을 것입니다. 그래서

vLine.setAttributeNS(null, "transform" , "scale(-1)")

나의 라인에 다른 속성을 추가하지만 내 이미지가 더 이상 SVG 프레임에 표시되지 않을 것으로 보인다. 가장 좋은 추측은 스케일링 요소를 변경해야한다면 좌표계에서 x 축과 y 축을 변경해야한다는 것입니다. 이미지가 프레임에 맞지만 프레임에 맞는지 확인해야합니다. 좌표를 통제하는 요인을 파악할 수 없습니다.

//A sample of my co-ordinates json 
[9.632932,47.347601],[9.594226,47.525058],[9.896068,47.580197], ....

어떤 도움을 주시면 감사하겠습니다.

출처

2013-12-22 Saif Asif

기본 좌표 변환의 [A 테이블] (http://stackoverflow.com/a/9053315/1169519). – Teemu

나는 (Y 축을 따라 그것을 미러링하기 위해) 변환을 시도했다. 계산에 평소보다 오래 걸렸습니다 (약 2 초). 그리고 후 - 병동은 이미지가 전혀 나타나지 않았습니다. –

JS와의 장기 폴링 변환을 수행하는 대신 원본 데이터에 올바른 좌표를 작성하는 것이 좋습니다. 숨겨진 요소가 무엇인지, 그들은 이제 Y 축 (위의'svg'의 맨 위에 있음) 위에 있으며, 각 Y 좌표에 적절한 값을 추가하여 올바른 위치로 이동해야합니다. – Teemu

많은 재검색과 시행 착오 시도 후에, 나는 해결책을 찾아 냈고, 같은 것을 찾고있는 다른 사람들을 위해 그것을 공유 할 것이다. 원래 문제는 SVG 요소 내 페이지에 매핑해야하는 일련의 좌표 (국가)가 있다는 것입니다. 문제는이 좌표가 실세계 좌표 였고 HTML 좌표계에서 직립으로 표시 될 수 있도록 (역으로) 뒤집을 필요가 있다는 것이 었습니다. 다음 알고리즘을 사용하여 변환했습니다.

//Here x and y are my co-ordinates 
function transform(x,y){ 
     if(x === 0 && y === 0) { 
      y = 90; 
     } 
     var tranformedX = (totalWidth/360)*(x+180); 
     var tranformedY = (totalWidth/360)*(-(y/Math.cos(Math.PI*(y/360))))+275; 
     return {x: tranformedX, y: tranformedY}; 
}

출처

2013-12-25 15:49:01

SVG 이미지의 반전 좌표

답변

관련 문제