1

私は視覚化プロジェクトに取り組んでいます。私のデータに基づいて、私はキャンバス上に何百もの小さな円をプロットしています。マウスオーバーイベントを追加して、マウスが円の囲み領域である場合は常に、データのノードプロパティがツールチップまたはキャンバス上のテキストとして表示されるようにします。私の現在の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メソッドを[繰り返し]呼び出す方法がわかりません。

どんな助けでも大歓迎です。

4

1 に答える 1

3

それでも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
}
于 2011-12-07T02:30:07.537 に答える