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 
}