요소에 대한 HTML 5 캔버스 마우스 이벤트 (쇼 툴팁)

Question

저는 시각화 프로젝트를 진행하고 있습니다. 내 데이터를 토대로 캔버스에 수백 개의 작은 원을 그리는 중입니다. 나는 마우스를 이벤트 위에 추가하여 마우스가 원의 둘러싸는 영역 일 때 내 데이터의 일부 노드 속성을 도구 설명이나 캔버스의 텍스트로 표시합니다. 나의 현재 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 [반복] 메소드를 호출 할 수있는 방법을 알아낼 수 없습니다.

도움이 될 것입니다.

Answer 1

KineticJS를 계속 사용하려면 Kinetic 모양을 drawCircle 루틴에 넣으십시오. 이것은 기본적으로 their tutorial에서 철수 아래로 제거됩니다 : 당신이 결국 KineticJS를 사용하지 않을 경우

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); 
} 

, 당신은 자신을 위해 당신이 그린 모든 원의 위치와 반경을 기억해야합니다, 다음을 수행

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 
}