HTML 5画布鼠标悬停在元素上的事件（显示工具提示）

Question

我正在开发一个可视化项目。根据我的数据，我正在画上数百个小圆圈。我想在事件上添加鼠标，以便每当鼠标是圆圈的封闭区域时，它将显示我的数据中的一些节点属性作为工具提示或作为画布上的文本。 我目前画圆法

function drawCircle(canvas,x,y,r) 
{ 
    canvas.strokeStyle = "#000000"; 
    canvas.fillStyle = "#FFFF00"; 
    canvas.lineWidth = 2; 
    canvas.beginPath(); 
    canvas.arc(x,y,r,0,Math.PI*2,true); 
    canvas.stroke(); 
    canvas.fill(); 
    canvas.closePath(); 
} 

我已经调查kinetic.js 但无法弄清楚如何我可以使用他们的图书馆叫我画圆[重复]方法。

任何帮助将不胜感激。

Answer 1

如果你仍然想使用KineticJS，你可以将Kinetic形状的东西放入drawCircle例程中。这基本上是拉出的their tutorial和剥离下来：

function drawCircle(stage,x,y,r) { 
    var circle = new Kinetic.Shape(function(){ 
    var context = this.getContext(); 
    // draw the circle here: strokeStyle, beginPath, arc, etc... 
    }); 
    circle.addEventListener("mouseover", function(){ 
    // do something 
    }); 
    stage.add(circle); 
} 

如果你不想使用KineticJS毕竟，你需要记住自己，你画了圈的每个的位置和半径，然后做像这样：

canvas.onmouseover = function onMouseover(e) { 
    var mx = e.clientX - canvas.clientLeft; 
    var my = e.clientY - canvas.clientTop; 
    // for each circle... 
    if ((mx-cx)*(mx-cx)+(my-cy)*(my-cy) < cr*cr) 
    // the mouse is over that circle 
}