나는 (판타지 시티의) svg 배경으로 프레임을 만들었습니다. 마우스로 건물 위로 이동하면 빨간색으로 바뀌고 클릭하면 몇 가지 정보가있는 거품이 열립니다. 이제이 도시는 거리를 따라 움직이는 사람들이 필요합니다.
이제 문제는 사람들이 svg 경로를 따라 움직이고 있지만 창 크기를 조정하면 경로 크기가 조정되지 않고 고정되어 있다는 것입니다.
var SVGPath.getTotalLength();를 사용 하여 경로의 전체 길이를 얻은 다음 jQuery $.each()루프 내부 에서 점의 좌표를 얻습니다.
var point = Path.getPointAtLength(v);
var x = point.x;
var y = point.y;
나는 내가 어디에서 틀렸는 지 이해하지 못한다.
여기 코드가있는 CodePen http://codepen.io/Angussimons/full/oZmNer/
좋아, 해결책을 찾았습니다. 다른 사람이 같은 문제가 있으면 여기에 게시하고 있습니다.
svg의 원래 크기는 1920x1080입니다.
따라서 창 크기에 맞게 조정 된 새로운 X 및 Y를 찾는 솔루션 :
var x = (point.x * w) / 1920;
var y = (point.y * h) / 1080;
창 크기를 얻으려면 jQuery .width()& .height()를 다음 과 같이 사용했습니다 .
var w = $(window).width();
var h = $(window).height();
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다