HTML5畫布：在自定義繪圖上創建工具提示

Question

我使用Flot爲我們的項目繪製圖像。對於預先定義的形狀，如line，pie，我可以通過flot.tooltip添加工具提示。

但是，我們有一些通過Html5畫布API繪製的圖像，例如Here。我想爲紅色矩形添加工具提示，併爲空白區域添加另一個工具提示。任何圖書館，使其工作？

Answer 1

使用畫布時，沒有一種很好的方法來檢測鼠標懸停在特定繪製物品上的情況;它只是一個緩衝區，不知道用什麼操作來繪製它。 Flot自己的懸停檢測沒有關於畫布上繪製的內容的概念;它只知道，例如餅在特定點開始並向外延伸一定數量的像素。

所以無論如何，你將不得不編寫一個接受鼠標事件的函數，檢查你用來繪製圖像的任何數據，並決定對應的內容。

Flot可以幫助您提供一種方法來覆蓋您自己的內置懸停功能;那麼該工具提示插件就可以簡單地與你的功能一起工作。由於您目前無法做到這一點，因此您可以選擇a）修改工具提示插件以使用您的功能，或者b）在overlay元素上註冊您自己的mousemove監聽器，然後爲工具提示插件生成「虛假」plothover事件消耗。