检测 HTML 画布中某些点的鼠标悬停? [英] Detect mouseover of certain points within an HTML canvas?

问题描述

我为 Canvas 构建了一个分析数据可视化引擎，并被要求在数据元素上添加类似工具提示的悬停，以显示光标下数据点的详细指标.

I've built an analytical data visualization engine for Canvas and have been requested to add tooltip-like hover over data elements to display detailed metrics for the data point under the cursor.

对于简单的酒吧&Gaant 图表、树形图和具有简单方形区域或特定兴趣点的节点图，我能够通过将绝对定位的 DIV 与 :hover 属性叠加来实现这一点，但还有一些更复杂的可视化，例如饼图和交通流渲染有数百个由贝塞尔曲线定义的独立区域.

For simple bar & Gaant charts, tree graphs and node maps with simple square areas or specific points of interest, I was able to implement this by overlaying absolutely-positioned DIVs with :hover attributes, but there are some more complicated visualizations such as pie charts and a traffic flow rendering which has hundreds of separate areas defined by bezeir curves.

是否可以以某种方式附加覆盖层，或者当用户将鼠标悬停在特定的封闭路径上时触发事件?

Is is possible to somehow attach an overlay, or trigger an event when the user mouses over a specific closed path?

需要指定悬停的每个区域定义如下:

Each area for which hover needs to be specified is defined as follows:

context.beginPath();
context.moveTo(segmentRight, prevTop);
context.bezierCurveTo(segmentRight, prevTop, segmentLeft, thisTop, segmentLeft, thisTop);
context.lineTo(segmentLeft, thisBottom);
context.bezierCurveTo(segmentLeft, thisBottom, segmentRight, prevBottom, segmentRight, prevBottom);
/*
 * ...define additional segments...
 */
// <dream> Ideally I would like to attach to events on each path:
context.setMouseover(function(){/*Show hover content*/});
// </dream>
context.closePath();

绑定到这样的对象在 Flash 或 Silverlight 中实现几乎是微不足道的，因为但当前的 Canvas 实现具有直接使用我们现有的 Javascript API 并与其他 Ajax 元素集成的优势，我们希望避免将 Flash 放入混合.

Binding to an object like this is almost trivial to implement in Flash or Silverlight, since but the current Canvas implementation has the advantage of directly using our existing Javascript API and integrating with other Ajax elements, we are hoping to avoid putting Flash into the mix.

有什么想法吗?

推荐答案

您可以处理 mousemove 事件并从该事件中获取 x,y 坐标.然后您可能必须遍历所有路径以测试该点是否在路径上.我有一个类似问题，可能有一些你可以使用的代码.

You could handle the mousemove event and get the x,y coordinates from the event. Then you'll probably have to iterate over all your paths to test if the point is over the path. I had a similar problem that might have some code you could use.

以这种方式循环可能会很慢，尤其是在 IE 上.您可能会加快速度的一种方法 - 这是一个黑客，但它会非常有效 - 将更改绘制每条路径的颜色，以便人类不会注意到它，但这样绘制每条路径一种不同的颜色.有一个表格来查找路径的颜色，只需查找鼠标下像素的颜色.

Looping over things in this way can be slow, especially on IE. One way you could potentially speed it up - and this is a hack, but it would be quite effective - would be to change the color that each path is drawn with so that it is not noticeable by humans but so that each path is drawn in a different color. Have a table to look up colors to paths and just look up the color of the pixel under the mouse.

这篇关于检测 HTML 画布中某些点的鼠标悬停?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！