HTML5 Canvas:在自定义绘图上创建工具提示

时间:2014-02-07 03:27:44

标签: html5-canvas flot

我正在使用Flot为我们的项目绘制图像。对于预定义的形状,例如linepie,我可以通过flot.tooltip添加工具提示。

但是,我们有一些通过Html5 canvas API绘制的图像,例如Here。我想为红色矩形添加工具提示,为空白区域添加另一个工具提示。任何图书馆都可以使用吗?

1 个答案:

答案 0 :(得分:1)

使用画布时,没有一种好方法可以检测鼠标悬停在特定绘制项目上的时间;它只是一个缓冲区,不知道用什么操作来吸引它。 Flot自己的悬停检测没有画布上绘制的概念;它只知道,例如,馅饼从特定点开始并向外延伸一定数量的像素。

所以无论如何,你都必须编写一个接受鼠标事件的函数,检查你用来绘制图像的数据,并决定它对应的内容。

Flot可以帮助提供一种方法来覆盖你自己的内置悬停功能;然后工具提示插件将简单地与您的功能一起使用。由于您目前无法做到这一点,您可以选择a)修改工具提示插件以使用您的函数,或者b)在overlay元素上注册您自己的mousemove侦听器,然后为工具提示插件生成“假的”plothover事件消费。