在圖像上標記位置和路線

我正在開發一種新的尋路軟件。我想讓用戶選擇一幅背景圖像來概覽遊樂園，辦公室設施等等。然後讓用戶在圖像上選擇一些重要的點。例如。「你在這裏」指出包含取景器地圖的「監視器」在哪裏（這將最終改變並且變得更加動態）。在圖像上標記位置和路線

所以這筆交易是：

1：需要基於Web的是 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 = document.getElementById('map').getContext("2d");創建context，context有畫線功能。

你可以得到的X，Y通過onlick，onmousedown和onmouseup事件和座標。

來源

2014-03-27 09:38:42 Victory

在圖像上標記位置和路線

回答

相關問題