在圖片上畫線 - Javascript？

我在我的頁面上有一些圖表。當用戶將光標拖到圖片上時，我想在圖上顯示一條水平線。在圖片上畫線 - Javascript？

enter image description here

上面的一個起點，而後者表示當用戶在圖形上指出他的光標會發生什麼。當光標在圖像上時，該行應該與光標保持在同一水平。

這是可能與JavaScript，例如？

2012-12-02 MikkoP

你可以使用[畫布] （http://en.wikipedia.org/wiki/Canvas_element）來畫線，但abimelex的答案可能是更好的解決方案。 – Douglas

這是，你需要，例如，一個div盒定位在curses Y值上，並帶有1px的綠色邊框。位置必須設置爲絕對。但是你不能直接在圖像上繪畫。

2012-12-02 12:02:17 abimelex

感謝您的回答。我按照你的建議創建了一個div，將它隱藏起來然後我做了這個。 http://jsfiddle.net/tyhk3/4/工程，但行不太順利。解決方案？ – MikkoP

它會閃爍，因爲當鼠標移動到該行本身時，瀏覽器將其視爲不再位於圖形上，因此會嘗試隱藏它。一種解決方法是將行和圖形圖像放入div中，並將事件處理程序附加到div而不是圖像上：http://jsfiddle.net/tyhk3/6/ – Stuart

感謝您的信息！我修改了一下我的代碼。我還需要其他功能，所以你的使用會更難。 http://jsfiddle.net/tyhk3/7/ – MikkoP

您可以使用D3和基於svg繪製圖形和懸停線，還可以添加其他圖形組件以進行交互，例如滑動條以選擇子區間來放大，更改標籤等。

（你可以拖動黃色欄，然後單擊傳奇;源代碼，點擊叉我在GitHub上）

2013-08-14 14:37:05

回答