Html 캔버스 Hover 이벤트 만들기

 

 

Html 캔버스에서는 그림을 그린 다음 그림을 1개의 객체로 보관하는 것이 아니라 그림 통째로 보관한다. 
즉, html에서 div태그로 여러가지 그림을 그리면, 각각 이벤트나 움직임을 줄 수 있지만, 캔버스에서는 그렇지 않다. 왜냐하면 캔버스에서 객체는 1개이고, 그림을 사각형, 원형으로 그리더라도 그림1개로 저장되기 때문이다.

이를 해결하기 위해서는 수동으로 만드는 방법 밖에 없다. 
원리는 간단하다.
사용자가 그림을 그릴 객체의 정보를 Javascript에서 배열이나 Object로 저장을 하고,
캔버스에서 마우스 이벤트를 감지하여 해당 영역에 값이 들어와있는지 계산하면 된다.

const price = [50,50,20];  //x좌표, y좌표, 원 크기
const ctx = $(캔버스)[0].getContext('2d');

//그리는 부분은 생략한다.

$(캔버스).mouseover(function(){  
	$(캔버스).mousemove(function(event){
		movingChecker(event);
	});
});		

function movingChecker(evt){
	var client_x = evt.clientX;  //이벤트 좌표
	var client_y = evt.clientY;
	var offset = $(캔버스).offset();  //캔버스 위치 객체
	var canvas_x = offset.left; 
	var canvas_y = offset.top;
	var realX = client_x - canvas_x;  //마우스 위치값에서 캔버스 위치객체값 빼기
	var realY = client_y - canvas_y;

	var point_x = price[0];  //x중심좌표
	var point_y = price[1];  //y중심좌표, price[2]는 원(사각형도 됨)크기 이다.
	if( point_x+price[2] >= realX && point_x-thirdSize[res[2]] <= realX){
		if(point_y+price[2] >= realY && point_y-thirdSize[res[2]] <= realY){
            console.log('내부에 들어옴.');
		}
	}
}