이미지의 위치 및 경로 표시

새로운 길 찾기 소프트웨어를 개발 중입니다. 놀이 공원, 사무실 시설 등의 개요를 사용자가 배경 이미지로 선택하게하려는 생각. 그런 다음 사용자가 이미지에서 여러 중요한 점을 선택하게하십시오. 예 : "당신은 여기 있습니다"라는 포인트는 웨이 파인더 맵을 포함하고있는 "모니터"가있는 곳입니다. (이것은 결국 바뀌고 더 다이나믹하게 변할 것입니다).이미지의 위치 및 경로 표시

그래서 거래는 다음과 같습니다

1 : 웹 기반해야 2 : 관리자가 이미지에 점을 선택 갖는 3 : 관리자 갖는 이미지에 목적지 일련의 (점)지도 밖으로 4 : 소스 지점과 끝 지점 사이에 선을 배치하거나 그립니다.

HTML5에서 이미지의 한 점을 선택/클릭하고 그 점의 좌표 (x, y)을 얻는 방법은 무엇입니까? (나는 이미지에 경로에서/매핑을 그리기위한 동일한 기술을 사용할 수 있습니다 가정합니다. 모든 입력이 감사

/브라이언

출처

2014-03-27 Brian Hvarregaard

이 사진을 보면 http://answers.oreilly.com/topic/1929-how-to-use-the-canvas-and-draw-elements-in-html5/ 사진을 볼 수 있습니다. 포인터의 위치와 이벤트, – jycr753

또한 http://jsbin.com/ApuJOSA/1/edit – jycr753

을 수행하는 방법의 또 다른 예이며 커서가 움직일 때마다 해당 값을 다른 함수로 설정하여 좌표 값을 선택하고 클릭하면 그 값을 얻고 필요한 값을 설정하면 무슨 뜻인지 알 수 있습니까? :) – jycr753

당신은 그럼 당신은 할 수 있습니다. <canvas style="background-image:url(map.jpg)" id="map"> 태그를 찾고 있습니다를 context, context는 선 그리기 기능을 만들 수 context = document.getElementById('map').getContext("2d");를 사용합니다.

을 당신은 X를 얻을 수, y를 통해와 onlick, onmousedown 및 onmouseup 이벤트의 좌표.

출처

2014-03-27 09:38:42 Victory

이미지의 위치 및 경로 표시

답변

관련 문제