[React로 화이트보드] Draw Element Picking 구현

먼저 간단하게 구조를 보면 다음과 같다.

Draw

메인 Canvas에서 Draw Element를 그려준다. 하나의 요소를 다 그렸다고 판단되면(mouseup event 발생 시) 해당 요소의 크기에 맞게 Draw Canvas를 생성하고 브라우저 상 동일한 위치에 그려준다. 이와 동시에 Picking Canvas에도 동일한 요소를 그려주는데 여기서는 Canvas가 아닌 Picking Canvas내 이미지로 그려줘야 한다.

Picking Canvas에 이미지를 그릴 때 Canvas Context의 getImageData로 imageData를 가져와서 putImageData로 Picking Canvas에 그려주면 기존 이미지 위치 위에 새로운 이미지가 겹쳐진다면 사각형 영역 내 그려지지 않은 빈 공간이 기존 이미지를 덮어씌어지는 듯한 동작을 하게된다. imageData의 pixel정보에 접근이 가능하여 이것저것 해봤지만 원하는 동작을 하지 않는다. HTMLImageElement를 생성하여 DrawImage를 해줘야 그려지지 않은 영역은 빈 공간으로 처리된다.

 

Picking

Draw할 때 Picking Canvas에 요소들을 그리는 경우 해당 요소들은 실제로 보이는 요소들이 아니다.
Picking Canvas에 그려지는 요소들은 alpha값을 1로 하고 r(0~255), g(0~255), b(0~255)값을 key값으로 사용한다. 그리고 Canvas의 opacity값을 0으로 하면 눈에는 안보이지만 마우스를 클릭했을 때 Picking Canvas Context에서 getImageData를 통해 원하는 좌표의 색상정보를 얻어올 수 있다. 이 동작을 수행하기 위해서 각각의 Canvas가 아닌 Picking Canvas에서 image로 요소들을 그렸던 것이다.

색상정보를 얻어왔으면 Draw Element를 순회하며 key값과 일치하는 Canvas를 찾아내서 편집을 할 수 있다.

 

 

일단 기본적인 기능 구현은 완료하였고, 앞으로 세부적인 기능 추가 및 렌더링 최적화 관련 작업을 진행 예정이다.