是否可以向在 HTML5 画布上绘制的图像添加工具提示? [英] Is it possible to add tooltips to image's drawn on an HTML5 canvas?

问题描述

我想使用 HTML5 画布绘制折线图或条形图.

I would like to draw a line or bar graph using HTML5 canvas.

我愿意

• 从外部获取数据(或将其硬编码以进行测试)

• take in data from an outside source (or hardcode it in for testing purposes)

绘制图形

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

Hover over a node/bar and have a tooltip appear displaying the number/relevant data.

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

So my question is, it is possible to apply tooltips to individual images/lines/anything on a canvas? (I know that the canvas itself can have it's own tooltip)

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

One solution that I'm sure would work would be to just make each node a separate canvas with it's own tooltip and image but that sounds a bit excessive.

理想情况下，我想使用 jquery.ui.tooltip，但实际上我只是想知道是否可以使用任何东西.

And ideally I would like to use jquery.ui.tooltip, but really I just want to know if anything will work.

    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";

我从这里获得了大纲，并添加了我的想法可能会起作用.

I got the outline from here and added what I thought could possibly work.

小猫画得很好，没有控制台错误和所有这些好东西.

The kitten draws properly and there are no console errors and all of that good stuff.

推荐答案

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

HTML5 (for lack of a better word) shapes are drawn onto a canvas, and technically don't exist. There are several plugins out there that make use of custom handlers to manage the precise locations of these shapes and add functionality similar to that of regular DOM elements.

我将 KineticJS 用于我的 HTML5 项目，因为它遵循常规形状的简单性，并允许复杂的形状以简单的方式.这是一个 KineticJS 示例，可向其形状添加工具提示.

I use KineticJS with my HTML5 projects as it follows the simplicity of regular shapes, and allows for complex shapes in an easy manner. Here is a KineticJS example that adds tooltips to their shapes.

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

You can use Kinetic.Image from the documentation to easily add the image to your stage, and follow the previously linked example on how to add tooltips to the shape.

这篇关于是否可以向在 HTML5 画布上绘制的图像添加工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！