是否可以将工具提示添加到HTML5画布上绘制的图像？

Question

我想使用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得到了大纲，并添加了我认为可行的内容。

小猫画得恰到好处，没有控制台错误和所有好东西。

Answer 1

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

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

您可以使用the documentation中的Kinetic.Image轻松将图片添加到您的舞台，并按照之前链接的示例了解如何向形状添加工具提示。