要素上のHTML 5 Canvas Mouseイベント(ツールチップを表示)

私は視覚化プロジェクトに取り組んでいます。私のデータに基づいて、私はキャンバスに何百という小さな円を描いています。私はマウスをイベントの上に追加して、マウスが円の囲み領域であるときはいつでもツールチップとして、またはキャンバス上のテキストとして、私のデータからいくつかのノードプロパティを表示するようにしたい。 私の現在の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

1 答え

それでもKineticJSを使用したい場合は、KineticシェイプをdrawCircleルーチンの中に入れます。これは基本的にチュートリアルから抜け出し、削除されました:

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
}
3
追加された
こんにちは、cxは半径xですか?サイライダスy?、そしてcrは何ですか?ありがとう
追加された 著者 Alberto Acuña,
(cx、cy)は円の中心の座標であり、crは円の半径である。
追加された 著者 James Clark,