html - 是否可以为在 HTML5 Canvas 上绘制的图像添加工具提示？

Question

我想使用 HTML5 canvas 绘制线条或条形图。

我愿意

• 从外部来源获取数据(或出于测试目的对其进行硬编码)

• 绘制图形

• 将鼠标悬停在节点/栏上，会出现一个工具提示，显示数字/相关数据。

所以我的问题是，可以将工具提示应用于 Canvas 上的单个图像/线条/任何内容吗？ (我知道 Canvas 本身可以有自己的工具提示)

我确信可行的一个解决方案是让每个节点成为一个单独的 Canvas ，它有自己的工具提示和图像，但这听起来有点过分。

理想情况下，我想使用 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(找不到更好的词)形状被绘制到 Canvas 上，技术上不存在。有几个插件使用自定义处理程序来管理这些形状的精确位置，并添加类似于常规 DOM 元素的功能。

我使用 KineticJS使用我的 HTML5 项目，因为它遵循规则形状的简单性，并允许以简单的方式实现复杂的形状。 Here is a KineticJS example为它们的形状添加工具提示。

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