Konva 배우기 (1)

Image by gapon1971 from Pixabay

 

Konva는 HTML의 <canvas> 요소를 쓰기 쉽게 만들어주는 라이브러리다. 캔버스 안에 오브젝트 하나 그리려고 일일이 lineTo()와 moveTo()를 쓰지 않아도 되는 편리함을 제공한다.

 

<canvas> 관련 라이브러리는 Konva 외에도 Fabric.js, EaselJS 등 다양하지만 Konva를 선택한 이유는 리액트에서 사용할 때 깔끔해 보여서다. Fabric.js가 제일 인기있는 모양이지만 샘플 코드에서 useEffect를 쓰는 것을 보고 Konva를 써보기로 했다.

 

* 리액트에서 Konva를 쓰려면 konva와 react-konva 둘 다 설치해야 한다.

 

기본 구조

Konva의 캔버스는 컨테이너인 <Stage> 컴포넌트 안에 각 그림을 <Layer> 컴포넌트별로 나뉘는 구조를 갖고 있다. 캔버스 오브젝트는 이 <Stage>와 <Layer>의 영역 안에 구현한다. <Layer> 컴포넌트는 필수는 아니지만, 같은 층에 있어야 할 오브젝트들을 묶는 데에 유용하게 쓰인다.

<Stage>
  <Layer>
    <Rect />
    <Circle />
    ...
  </Layer>
</Stage>

 

* 오브젝트를 그룹핑하는 컴포넌트는 <Layer> 외에도 <Group>이 있다.

 

도형 그리기

사각형, 원 같은 기본적인 도형은 컴포넌트로 다 준비돼있다. 도형을 그릴 땐 그릴 위치(x,y 좌표), 크기, 색을 최소한 넣어줘야 캔버스에 뜬 오브젝트를 볼 수 있다.

<!-- 사각형 -->
<Rect x={10} y={10} width={100} height={100} fill="blue" />

<!-- 원 -->
<Circle x={200} y={100} radius={50} fill="green" />

<!-- 선 -->
<Line x={10} y={10} points={[0, 0, 100, 0, 100, 100]} stroke="black" />

<!-- 텍스트 -->
<Text text={text} fill="white" x={x} y={y} width={100} height={100} align="center" />