2012-03-23 46 views
2

我想用HTML5画布绘制线条或条形图。是否可以将工具提示添加到在HTML5画布上绘制的图像上?

我想

  • 取在数据从外部源(或硬编码在用于测试目的)

  • 绘制图形

  • 将鼠标悬停在一个节点/酒吧并有一个工具提示出现显示号码/相关数据。

所以我的问题是,有可能将工具提示应用到画布上的单个图像/线条/任何东西? (我知道画布本身可以有它自己的工具提示)

我肯定会工作的一个解决方案就是让每个节点都与自己的工具提示和图像分开,但听起来有点过分。

理想情况下,我想使用jquery.ui.tooltip,但真的只是想知道是否有任何工作。

var imageObj = new Image(); 
    $(imageObj).attr("title","kitten"); 
    $(imageObj).tooltip(); 

    imageObj.onload = function(){ 
    context.drawImage(imageObj, destX, destY, destWidth, destHeight); 
    }; 
    imageObj.src = "BW-kitten.jpg"; 

我从here得到了纲要,并添加了我认为可能有效的工作。

小猫画得不错,没有控制台错误和所有这些好东西。

回答

2

HTML5(缺少一个更好的单词)形状被绘制到画布上,技术上不存在。有几个插件使用自定义处理程序来管理这些形状的精确位置,并添加与常规DOM元素类似的功能。

我使用KineticJS与我的HTML5项目,因为它遵循规则形状的简单性,并允许以一种简单的方式复杂的形状。 Here is a KineticJS example将工具提示添加到其形状。

您可以使用Kinetic.Imagethe documentation轻松地将图像添加到您的舞台,并按照以前链接的示例如何将工具提示添加到形状。