我正在考虑在arbor.js数据图表的边缘进行鼠标悬停检测。我可以通过使用canvas getImageData技术检测边缘上的鼠标
function detectLine(x, y,content) {
var imageData = ctx.getImageData(0, 0, w, h),
inputData = imageData.data,
pData = (~~x + (~~y * w)) * 4;
if (inputData[pData]===16 && edg._id) {
var z=sys.getEdges(ion,lbl);
console.log(z)
$('<div id="tooltip">' + content + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
return true;
}
else{
$("#tooltip").remove();
return false;
}
}
然后调用它:
canvas.addEventListener("mousemove", function(e){
var x = parseInt(e.offsetX);
var y = parseInt(e.offsetY);
detectLine(x,y,nd._id);
// console.log(edg.target.data.label);
});
这肯定会检测鼠标悬停时的边缘,但我无法获取工具提示上每条边的ID或名称。这是通过检测边缘的颜色像素来实现的,这些像素对于所有边缘都保持相同。有关如何在检测到鼠标悬停时调用特定边缘名称或ID的任何想法。