检测鼠标悬停并显示HTML画布上点的工具提示文本

Question

Ive recently created a "map" although not very sophisticated (im working on it) it has the basic function and is generally heading in the right direction. Ive最近创建了一个“地图”，尽管它不是很复杂（我正在研究中），但它具有基本功能，并且通常朝着正确的方向前进。

If you look at it you can see a tiny red dots and on those tiny red dots i want to mouseover it and see text basically but ive had a bit of trouble getting the code right. 如果您查看它，您会看到一个小红点，而在这些小红点上，我想将其悬停在鼠标上，基本上可以看到文本，但是我在正确编写代码时遇到了一些麻烦。

http://hummingbird2.x10.mx/website%20creation/mainpage.htm http://hummingbird2.x10.mx/website%20creation/mainpage.htm

This is all the code so far. 这是到目前为止的所有代码。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Oynx Warrior</title>
 <link rel="stylesheet" type="text/css" href="mystyle.css" />

 </head>
 <body>
 <h1>Oynx Warrior</h1>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
 Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
 var c=document.getElementById("myCanvas");
 var cxt=c.getContext("2d");
 cxt.fillStyle="#red";
 cxt.beginPath();
 cxt.arc(50,50,1,0,Math.PI*2,true);
 cxt.closePath();
 cxt.fill();

</script>
</body>
</html>

Answer 1

Here are four options: 这是四个选项：

Keep track of all the dots' locations and track the mousemove event on the body. 跟踪所有点的位置，并跟踪身体上的mousemove事件。 When the mouse moves over a dot, re-draw the canvas with the text. 当鼠标移到一个点上时，用文本重新绘制画布。 When the mouse moves off, clear the canvas and re-draw it without the text. 当鼠标移开时，清除画布并重新绘制而不显示文本。 You have to write your own 'hit' detection code to compare the mouse position to the bounding boxes/radius of all dots. 您必须编写自己的“命中”检测代码以将鼠标位置与所有点的边界框/半径进行比较。 It's hard, but not impossible. 这很难，但并非不可能。
Instead of one canvas for the entire map, use a canvas to create your custom dot, call toDataURL() on the canvas to get a string for it, create a new absolutely-positioned <div> element for each dot, and set the .style.backgroundImage = url('+myDotDataURL+'); 可以使用一个画布来创建您的自定义点，而不是整个地图使用一个画布，在画布上调用toDataURL()为其获取字符串，为每个点创建一个新的绝对定位的<div>元素，然后设置.style.backgroundImage = url('+myDotDataURL+'); . 。 Now you can just set the title attribute on each div, and let the browser handle the mouse detection and tooltip display for you. 现在，您只需在每个div上设置title属性，然后让浏览器为您处理鼠标检测和工具提示显示。 Downside: you will see the tooltip for a square area around the dot, not exactly the dot itself. 缺点：您会看到围绕点的正方形区域的工具提示，而不仅仅是点本身。
Instead of HTML Canvas, go with SVG. 而不是HTML Canvas，而是使用SVG。 In SVG drawn 'elements' are actual objects that have their own events and hit detection. 在SVG中，绘制的“元素”是具有自己的事件和命中检测的实际对象。 With this you can draw custom dots and let the browser do all mouse hits for you. 这样，您就可以绘制自定义点，并让浏览器为您完成所有鼠标单击操作。

检测鼠标悬停并显示HTML画布上点的工具提示文本

问题描述

1 个解决方案

解决方案1
1 2011-01-11 23:16:10

检测鼠标悬停并显示HTML画布上点的工具提示文本

问题描述

1 个解决方案

解决方案1 1 2011-01-11 23:16:10

解决方案1
1 2011-01-11 23:16:10