HTML 5 Canvas鼠标悬停在元素上的事件(显示工具提示)

时间:2011-11-24 23:36:17

标签: html5-canvas mouseevent kineticjs

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

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 但无法弄清楚如何使用他们的库调用我的drawCircle [重复]方法。

任何帮助都将受到高度赞赏。

1 个答案:

答案 0 :(得分:3)

如果您仍想使用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
}