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

问题描述

我想使用HTML5 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; 
  

我从这里，并添加了我认为可能可以工作。

没有控制台错误和所有这些好东西。

解决方案

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

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

您可以使用 Kinetic.Image docs / symbols / Kinetic.Image.phprel =nofollow>文档，以轻松地将图像添加到您的舞台，并按照先前关于如何添加工具提示到形状的链接示例。

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

I would like to

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

• draw the graph

• 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.

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 (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.

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.

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屋！